JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家。
以下是我自己做的一个小例子,用来更简单明了的说明js全选和删除。
一、全选的说明:当选中全选的checkbox时,下面1-5都会选中,没有选中时1-5都不会选中,这个实现不难,步骤如下:
1、获取全选框的选中状态,
2、for循环设置所有的单选框的选中状态
主要代码:
//1.获取全选按钮
var chkAllObj = document.getElementById("chkAll");
//2.获取所有单选框
var chkOneObjs = document.getElementsByClassName("chkOne");
//3.设置点击事件
chkAllObj.onclick = function () {
//3.1获取全选框的选中状态
var isChecked = this.checked;
//3.2for循环设置所有的单选框的选中状态
for (var i = ; i < chkOneObjs.length; i++) {
chkOneObjs[i].checked = isChecked;
}
}
二、全选中注意细节
如图:当我们选中1时,全选按钮也应该选中,有一个单选没选中时,全选也应该不选中
主要代码:
//4.为所有单选框设施点击事件--实现勾选全部单选框,全选框也被勾选
for (var i = ; i < chkOneObjs.length; i++) {
//4.1设置点击事件
chkOneObjs[i].onclick = function () {
//4.2循环所有的单选框
for (var j = ; j < chkOneObjs.length; j++) {
if (chkOneObjs[j].checked == false) {
//将全选框的选中状态改为false
chkAllObj.checked = false;
return;
}
}
//4.3如果代码可以执行到这里,全选都被选中了
chkAllObj.checked = this.checked; }
}
三、删除中应注意的问题
js中的删除时调用父元素将其子元素删除,对于上面的表格我们将其父子关系从小到大为:checkbox->td->tr->tBody->table
1、注意:tr的父元素是tBody而不是table,这点可能很多人都会认为tr的父元素是table,但是我查找过一些资料,有的资料对这个定义也不是很明确,还有浏览器的兼容性问题等等,所以删除的方法也不止一种,但是我们可以采用通用的代码tr.parentNode.removeChild(tr)进行删除。
JS中表格的全选和删除要注意的问题的更多相关文章
- js中checkbox的全选和反选的实现
<head> <meta charset="utf-8"/> <script type="text/javascript"> ...
- angular实现表格的全选、单选、部分删除以及全部删除
昨天自己写了一小段js,在全选的时候有点儿小坑,然后,整理了一下.今天把它贴出来,希望以后还记得. 大家也可以去github上查看或下载:https://github.com/dreamITGirl/ ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- ASP.NET给DataGrid,Repeater等添加全选批量删除等功能
很多情况下,在管理或者查看列表的时候我们需要很需要“全选”这个功能,这在ASP.NET中是非常容易实现的,下面我就将演示一点小代码实现这一功能. 实现全选的还是js的一个小函数: [code] ...
- vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
- 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理
近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...
- ElementUi 表格取消全选框,用文字表示
Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 <el-table v-loading="zongShipLoading&q ...
- php对表格进行批量操作如全选反选删除功能
<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...
- asp.net中Repeater结合js实现checkbox的全选/全不选
前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...
随机推荐
- .net 地址栏传中文乱码 的解决方法
1.设置web.config文件. <system.web> ...... <globalization requestEncoding="gb2312" res ...
- Oracle 数据文件 reuse 属性 说明(转载)
Oracle 表空间 创建参数 说明 http://blog.csdn.net/tianlesoftware/archive/2011/01/27/6166928.aspx 当我们对表空间添加数据文件 ...
- MySQL行级锁、表级锁、页级锁详细介绍
原文链接:http://www.jb51.net/article/50047.htm 页级:引擎 BDB.表级:引擎 MyISAM , 理解为锁住整个表,可以同时读,写不行行级:引擎 INNODB , ...
- PHP自动生成前端的表单框架
<?php /** * 为当前所在菜单项样式 * @param string $controller_name * @param string $action_name * @param str ...
- grep;egrep;fgrep
-1 使用场景:搜索定位内容并输出(所在行) -2 三者区别: --1 grep 默认支持普通正则 --2 egrep 默认支持扩展正则 等同于 grep -E --3 fgrep 速度最快,不支持 ...
- nginx和apache的优缺点比较
简单的说apache httpd和nginx都是web服务器,但两者适应的场景不同,也就是两者专注于解决不同的问题.apache httpd:稳定.对动态请求处理强,但同时高并发时性能较弱,耗费资源多 ...
- BZOJ 3572 世界树(虚树)
http://www.lydsy.com/JudgeOnline/problem.php?id=3572 思路:建立虚树,然后可以发现,每条边不是同归属于一端,那就是切开,一半给上面,一半给下面. # ...
- 软件测试-nextDate问题
NextDate 函数包含三个变量:month . day 和 year ,函数的输出为输入日期后一天的日期. 例如,输入为 2006年3月 7日,则函数的输出为 2006年3月8日 .要求输入变量 ...
- C语言中long类型,int类型
long类型表示long int,一般简写为long,注意long不表示long double.虽然有时候会有sizeof(long)=sizeof(int),long int与int是不同的: 16 ...
- IA32与x86
64位机器相比于32位优点 ①访问虚拟地址范围更大 ②更多的寄存器 ③过程较简单 ④采用条件传送指令 详细看:http://baike.baidu.com/link?url=DoRp7iW_z3cE6 ...