zoukankan      html  css  js  c++  java
  • 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)进行删除。

  • 相关阅读:
    VirtualBox COM对象获取失败
    layui的表单功能
    phpstudy+phpstorm配置xdebug
    wamp2.5怎么设置虚拟域名
    腾讯微博-转播到微博的简单使用
    新浪微博--分享到微博的简单使用
    CKEdiotr使用入门
    GridView删除行
    Python迭代器笔记
    Java基础之打印万年历
  • 原文地址:https://www.cnblogs.com/xiaoyuanding/p/3888827.html
Copyright © 2011-2022 走看看