使用Js 简单实现tr点击 tr前的checkbox选中或取消
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<SCRIPT LANGUAGE="javascript">
<!--
function bgChange(obj){
obj.all.id.checked=(obj.all.id.checked==true?false:true); //复选框状态第二转变，即为正常状态 其all.id 中的id为checkbox的name
}
//-->
</SCRIPT>
<body>
<FORM METHOD=POST NAME="form" action="del.asp">
<table width="998" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center">多选</div></td>
<td><div align="center">内容</div></td>
</tr>
<tr onmouseover="this.style.background='#E5ECF2'"; onclick="bgChange(this)">
<td><div align="center"><input type="checkbox" name="id" value="1"></div></td>
<td>信息一</td>
</tr>
<tr onmouseover="this.style.background='#E5ECF2'"; onclick="bgChange(this)">
<td><div align="center"><input type="checkbox" name="id" value="1"></div></td>
<td>信息二</td>
</tr>
<tr onmouseover="this.style.background='#E5ECF2'"; onclick="bgChange(this)">
<td><div align="center"><input type="checkbox" name="id" value="1"></div></td>
<td>信息三</td>
</tr>
</table>
</FORM>
</body>
</html>
分享到：
相关推荐
//html <table id=unit> <tr> 选项一 选项二 姓名 </tr> <tr> <td><input type=checkbox /> <td><input type=checkbox /> 小红 </tr> <tr> <td><input type=checkbox /> <td><input type=...
本文实例讲述了jQuery实现点击行选中或取消CheckBox的方法。分享给大家供大家参考，具体如下： /// /// 点击行选中或者取消CheckBox /// /// <param name=TableID>表ID function SetCheckBox_Check(TableID) { ...
主要介绍了JS选中checkbox后获取table内一行TD所有数据的方法,涉及javascript针对table元素遍历与获取的技巧,需要的朋友可以参考下
$[removed](click,.layui-table-body table.layui-table tbody tr, function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'); //存在固定列 if (tableBox....
Html 中的复选框（Checkbox）属性解析及应用 Html 中的复选框（Checkbox）是一种常用的表单控件，...在上面的例子中，我们使用了 Checkbox 来实现多选框的功能，并使用了 onclick 事件来实现选中和取消选中的功能。
改版uni-table插件功能，新增单击行事件、单击某td事件、单独修改某td的字体颜色；选中行样式修改。主要修改文件uni-tr、uni-td;
本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考，具体如下： 今天在页面中使用jQuery实现了全选框操作，如图： 具体的实现过程很简单： 第一步 设计一个简单的表格： 设置表格列标题...
项目需求，可以用复选框勾选项目进行提交，...<table class=layui-table lay-data={url: lay-filter=test3> <tr> <th lay-data={type:>ID <th lay-data={field:>ID 测试项 <th lay-data={field:'t2', edit:
bootstrap-table中实现，翻页之后再返回，依然选中的情况，具体内容如下 //var productids = $("body",window.parent.frames[0].document).find('.ptids');//textarea存放数据 var productids = $('textarea'); var...
//点击选中(单选) //单击行勾选checkbox事件 $[removed]("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('....
checkbox批量选中,获取选中项的值的简单实例 <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> [removed][removed] </head> &...
本文实例为大家分享了js实现checkbox批量选中的具体代码，供大家参考，具体内容如下 <html > <head> <title>checkbox全选</title> <meta http-equiv=Content-Type content=text/html...
当前新增的复选框加上点击事件 2、点击删除按钮 获取表格体中被选中的行, 删除整个tr, 将全选前面的复选框变成false 获取的是第一个td中的checkbox的状态 checked为true 2层父子 3 、点击全选按钮前面的复选框 ...
今天需要实现这样一个功能，有checkbox列表可供选择，要选择不分页之间的行并保存 最终实现的功能如图：（图片来自网上） 具体实现 首先，来看具体的代码，这里只截取实现功能所需代码 var selectionIds =[],...
首先来看看实现的效果图： HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了： <table class=table> <tr class=success> 类别编号 类别名称 类别组 状态 说明 </tr> ...
思路，根据 data-index 找到 点击到的tr,获取tr下的 div，js 模拟点击 function iniTable() { layui.use('table', function(){ var table = layui.table; //展示已知数据 table.render({ elem: tableid ,cols...
@param LableIdString label 表标前缀 这个用于多个分级 如 当前为第一级中有 input[type='checkbox'] value = 1 如果下面有级 则在此inpu 下应该加入 <label id='v1'> 以此类推 调用方式 $("#ViewSetS")....
点击表头即可实现排序的代码./*table排序步骤 1、给排序的表格加id 2、标题栏加 3、排序的内容加 5、引入此js 6、在文档的末尾加入 [removed] var to = new TableOrder("idTable"), odID = to.creat({ type: "int", ...
不操作页面，实现table表格中的checkbox选中功能 二、经过 刚开始的思路： 1、通过table的id，找到table渲染时生成的div，即table的下一个兄弟节点div.layui-table-view 2、由于checkbox是固定列，再通过第一步，...
1. 效果图: 点击 bootstrapTable 单选的按钮, 选中该列, 取到该列的所有值. 2. js 代码 : bootstrapTable 初始化 a. 注意: singleSelect : true, // 单选checkbox columns : [ { checkbox: true } ] // ...