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)进行删除。