JS中表格的全选和删除要注意的问题

在项目开发中，由于刚刚开始做项目，我对js还不是很精通，所以在用js对表格的全选和删除中遇到了不少问题，后来通过查找资料解决了，之后总结了一下关于js表格的全选和删除出现的一些问题，希望能帮助到大家。

以下是我自己做的一个小例子，用来更简单明了的说明js全选和删除。

一、全选的说明：当选中全选的checkbox时，下面1-5都会选中，没有选中时1-5都不会选中，这个实现不难，步骤如下：

1、获取全选框的选中状态，

2、for循环设置所有的单选框的选中状态

主要代码：

 1     //1.获取全选按钮
 2     var chkAllObj = document.getElementById("chkAll");
 3     //2.获取所有单选框
 4     var chkOneObjs = document.getElementsByClassName("chkOne");
 5     //3.设置点击事件
 6     chkAllObj.onclick = function () {
 7         //3.1获取全选框的选中状态
 8         var isChecked = this.checked;
 9         //3.2for循环设置所有的单选框的选中状态
10         for (var i = 0; i < chkOneObjs.length; i++) {
11             chkOneObjs[i].checked = isChecked;
12         }
13     }
14

二、全选中注意细节

如图：当我们选中1时，全选按钮也应该选中，有一个单选没选中时，全选也应该不选中

主要代码：

 1  //4.为所有单选框设施点击事件--实现勾选全部单选框,全选框也被勾选
 2     for (var i = 0; i < chkOneObjs.length; i++) {
 3         //4.1设置点击事件
 4         chkOneObjs[i].onclick = function () {
 5             //4.2循环所有的单选框
 6             for (var j = 0; j < chkOneObjs.length; j++) {
 7                 if (chkOneObjs[j].checked == false) {
 8                     //将全选框的选中状态改为false
 9                     chkAllObj.checked = false;
10                     return;
11                 }
12             }
13             //4.3如果代码可以执行到这里,全选都被选中了
14             chkAllObj.checked = this.checked;
15 
16         }
17     }

三、删除中应注意的问题

js中的删除时调用父元素将其子元素删除，对于上面的表格我们将其父子关系从小到大为：checkbox->td->tr->tBody->table

1、注意:tr的父元素是tBody而不是table,这点可能很多人都会认为tr的父元素是table，但是我查找过一些资料，有的资料对这个定义也不是很明确，还有浏览器的兼容性问题等等,所以删除的方法也不止一种，但是我们可以采用通用的代码tr.parentNode.removeChild(tr)进行删除。