在项目开发中,由于刚刚开始做项目,我对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. VIM使用(三)

    Vim自动补全神器:YouCompleteMe Ubuntu下,先通过Bundle安装插件: Bundle 'Valloric/YouCompleteMe'Bundle 'scrooloose/syn ...

  2. node

    docker run -d --name data -v c:/jayruanwork/app:/usr/share/app busybox || windows c:\jayruanwork\app ...

  3. [UIImage resizableImageWithCapInsets:]

    [UIImage resizableImageWithCapInsets:]使用注意 转自:http://www.cnblogs.com/scorpiozj/p/3302270.html 最近在sae ...

  4. lnmp 下安装yaf

    须有配置好的环境 详情见:centos6.5下yum安装lnmp(适合刚入职的新手的方法) http://www.cnblogs.com/qzjpkfj/p/4211126.html 具体安装步骤详情 ...

  5. The Task: Events, Asynchronous Calls, Async and Await

    The Task: Events, Asynchronous Calls, Async and Await Almost any software application today will lik ...

  6. forward和redirect 的区别

    一.使用区别 1.从地址栏显示来说 forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器.浏览器根本不知道服务器发送的内容从哪里来 ...

  7. Delphi中的THashTable

    在Delphi中,Inifiles单元中有一个TStringHash的类,不过它的Value仅支持Integer(其实也不是问题,有其它类型可以将变量变为Pointer),有点不舒服,今天没事做就把它 ...

  8. python之celery的使用(一)

    前段时间需要使用rabbitmq做写缓存,一直使用pika+rabbitmq的组合,pika这个模块虽然可以很直观地操作rabbitmq,但是官方给的例子太简单,对其底层原理了解又不是很深,遇到很多坑 ...

  9. about this blog

    这个博客大概是被我用来整理模板的吧╮(╯▽╰)╭ 因为本小盆友巨懒,99.9%是不会写什么题解或者学习笔记什么的

  10. CS小分队第二阶段冲刺站立会议(6月3日)

    昨日成果:完成了主界面按钮移动交换位置 遇到问题:最后的时候发现仅交换了按钮在数据库中的信息,对于按钮的链接忘记交换了 今日计划:解决这个问题,对这个冲刺阶段的成果进行整理