Javascript实现表格的全选框
这是一个老生常谈的问题了，不过还是拿我的解决办法来晒晒太阳。
最开始我是为Table中的每一项添加属性 class="item1" 的方式实现的
1. 第一种解决方法
<tr>
<th>
<input type="checkbox" onclick="checkAll(this, 'item1');" />
</th>
<th>ID</th>
<th>用户名</th>
</tr>
<tr>
<td>
<input type="checkbox" class="item1" />
</td>
<td>1001</td>
<td>张三</td>
</tr>
<tr>
<td>
<input type="checkbox" class="item1" />
</td>
<td>1002</td>
<td>李四</td>
</tr>
</table>
var checkItems = document.getElementsByTagName('input');
for (var i = 0; i < checkItems.length; i++) {
var checkItem = checkItems[i];
if (checkItem.type === 'checkbox' && checkItem.className === 'item1') {
checkItem.checked = sender.checked;
}
}
}
仔细分析，这里面使用的 getElementsByTagName 会把页面上所有的 input 标签都找到（包括单行文本输入框，
按钮，所有的单选和多选框等），然后再执行过滤，这是一种效率不高的方法。
如果能用 getElementsByName 直接获取需要的多选框，岂不是更高效，就有了下面的方法
2. 第二种解决方法
<tr>
<th>
<input type="checkbox" onclick="checkAll2(this, 'item1');" />
</th>
<th>ID</th>
<th>用户名</th>
</tr>
<tr>
<td>
<input type="checkbox" name="item1" />
</td>
<td>1001</td>
<td>张三</td>
</tr>
<tr>
<td>
<input type="checkbox" name="item1" />
</td>
<td>1002</td>
<td>李四</td>
</tr>
</table>
var checkItems = document.getElementsByName(checkName);
for (var i = 0; i < checkItems.length; i++) {
checkItems[i].checked = sender.checked;
}
}
代码下载
[updated,2009-2-17]
上面这种方法虽然简洁，但是 getElementsByName 只是 document 的方法，其他DOM对象没有此方法。（正如留言中 @笛子 所说）
所以效率比较高的方法，还是在table的上下文中使用 getElementsByTagName 来查找，我们给 table 添加 id 属性
为 table1。
3. 效率比较高的解决方法
var checkItems = document.getElementById(tableId).getElementsByTagName('input');
for (var i = 0; i < checkItems.length; i++) {
var checkItem = checkItems[i];
if (checkItem.type === 'checkbox' && checkItem.className === 'item1') {
checkItem.checked = sender.checked;
}
}
}
代码下载
Javascript实现表格的全选框相关推荐
- element表格取消全选_ElementUi 表格取消全选框，用文字表示
Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 二.给 方法(这个方法主要就是给表格所需要的列添加类名.)具体可以看ElementUi的表格 ...
- element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
- element-ui主表格多选后 二级弹框表格默认全选数据
需求:element ui的主数据列表多选后,点击按钮进入二级弹框后,让二级弹框的所有数据默认全选 二级弹框结构: 网上试了好多方法都未生效,只有用watch监听的方法才行. 注意:这里必须放在thi ...
- 利用JS来实现表格的全选、全不选、反选以及删除的功能
利用JS来进行表格的选择删除等功能 二.代码 1.表格的制作以及事件的绑定 2.全选按钮的功能实现 3.全不选按钮的功能实现 4.反选按钮的功能实现 5.删除按钮的功能实现 6.鼠标悬停时颜色的变化 ...
- vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
- layui添加复选框_layui表格数据复选框回显设置方法
layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显. layui这 ...
- JQ表格的全选和全不选
JQ表格的全选和全不选 使用元素选择器:选择器[属性名称='属性值']$("input[type='checkbox']:gt(0)").prop("checked&qu ...
- js——全选框 checkbox
一直会碰见input 全选框的问题,先整理一种情况: 1. <input id="selectAll" type="checkbox" />全选 2 ...
- 【 jQuery 】利用 jQuery 选择器实现表格的全选，取消选择，单击更 改选中状态，反选等功能，为表格添加光棒效果
利用 jQuery 选择器实现表格的全选,取消选择,单击更 改选中状态,反选等功能.如图所示.点击全选按钮,选中所有行,点击取 消按钮,所有行为未选中状态,单击反选按钮,则选中的行变成未选中的: 未选 ...
最新文章
- 工作中不能学的6种人
- 恭喜我自己装上了Windows Server 2008 R2 和使用Windows Live Writer 写日志
- 设置最小值与最大值 css,一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景...
- SQLite Select 语句(http://www.w3cschool.cc/sqlite/sqlite-select.html)
- leetcode(链表专题)
- libSVM分类小例C++
- python调用文件可以干嘛_Python完成读取并保存文件类的详细介绍
- 罗森伯格高端布线助力昆山基地
- python decorator_python3（十八）decorator
- 运筹学 美国人在计算机上实现的四,运筹学试卷及答案.
- 通过regedt查看计算机密码,教你操作电脑密码查看器 【解决办法】 的还原教程_...
- 全球地区选择,支持中英文切换。国家-省市-城市-地区
- SpringBoot使用LibreOffice word转换PDF
- 华为计算机系统叫什么,华为MateBook操作系统是什么
- 写代码的时候图片显示不出来怎么办？
- 如何正确理解商业智能BI的实时性？
- java读取sheet2_java读取Excel指定sheet页或全部sheet页数据(含2003和2007版本)
- 2021巢湖第一中学高考成绩查询,2021年巢湖高中学校排名及录取分数线排名
- Unity之Failed to import package with error: Couldn‘t decompress package
- mac电脑备份后的微信聊天记录怎么找