在项目开发中,由于刚刚开始做项目,我对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中表格的全选和删除要注意的问题的更多相关文章

  1. js中checkbox的全选和反选的实现

    <head> <meta charset="utf-8"/> <script type="text/javascript"> ...

  2. angular实现表格的全选、单选、部分删除以及全部删除

    昨天自己写了一小段js,在全选的时候有点儿小坑,然后,整理了一下.今天把它贴出来,希望以后还记得. 大家也可以去github上查看或下载:https://github.com/dreamITGirl/ ...

  3. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  4. ASP.NET给DataGrid,Repeater等添加全选批量删除等功能

    很多情况下,在管理或者查看列表的时候我们需要很需要“全选”这个功能,这在ASP.NET中是非常容易实现的,下面我就将演示一点小代码实现这一功能.   实现全选的还是js的一个小函数:   [code] ...

  5. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  6. 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理

    近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...

  7. ElementUi 表格取消全选框,用文字表示

    Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 <el-table v-loading="zongShipLoading&q ...

  8. php对表格进行批量操作如全选反选删除功能

    <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...

  9. asp.net中Repeater结合js实现checkbox的全选/全不选

    前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...

随机推荐

  1. easyui-combobox绑定json数据

    用的C#语言 后台取数据,就不用废话了,先看看序列化json数据 /// <summary> /// 对象转JSON /// </summary> /// <param ...

  2. 《JavaScript 闯关记》之垃圾回收和内存管理

    JavaScript 具有自动垃圾收集机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存.而在 C 和 C++ 之类的语言中,开发人员的一项基本 ...

  3. Sql存储过程解密方法

    在网上查到这样一个存储过程解密的方法,用起来简单,收藏到这里: )) AS ------------------------sql2000大于40000的----------------- --原作: ...

  4. Java学习——内部类

    内部类的访问规则:1,内部类可以直接访问外部类中的成员,包括私有. 之所以可以直接访问外部类中的成员,是因为内部类中持有了 一个外部类的引用,格式 外部类名.this2,外部类要访问内部类,必须建立内 ...

  5. PHP学习笔记三十一【const】

    <?php //常量都是public类型 // const 常量名=赋值 .变量名不需要加$符号,也不需要要访问修饰符,默认就是public class A{ const TAX_RATE=0. ...

  6. [原创]Windows下更改特定后缀名以及特定URL前缀的默认打开方式

    Windows下,特定后缀名的文件会由特定的应用程序来运行,比如双击readme.txt,通常情况下会由Windows自带的notepad.exe(记事本)打开文件.如果现在安装了记事本以外的其他文本 ...

  7. (原)Ubuntu16中使用nvidia官方提供的驱动,而非自带的驱动

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5638185.html 安装完ubuntu16后,显卡显示的是Gallium... 在“设置-软件和更新 ...

  8. Oracle中MERGE语句的使用

    Oracle在9i引入了merge命令, 通过这个merge你能够在一个SQL语句中对一个表同时执行inserts和updates操作. 当然是update还是insert是依据于你的指定的条件判断的 ...

  9. 菜单之一:Menu基础内容

    参考<疯狂android讲义>2.10节P168 1.重要接口 Android菜单相关的重要接口共有以下四个: 其中Menu为普通菜单,SubMenu包含子项,ContextMenu当长时 ...

  10. C语言基础10

    栈区间:在函数内部声明的变量都存放在栈区间,比如int char 数组 结构体 指针,只管申请,系统会自动帮我们回收,收回的时间是作用域结束之后,遵循的原则是"先进后出". int ...