deleteRow() 连续删除多行

应用:删除表格选中的一行或多行。
html代码如下:

<table >
<tr>
<td >复选框</td>
<td >序号</td>
<td >代码</td>
<td >名称</td>
</tr>

<tbody id="mainBody">
<tr>
<td ><input type="checkbox" name="dms" value="D1" /></td>
<td >1</td>
<td >D1</td>
<td >名称1</td>
</tr>
<tr>
<td ><input type="checkbox" name="dms" value="D2" /></td>
<td >2</td>
<td >D2</td>
<td >名称2</td>
</tr>
<tr>
<td ><input type="checkbox" name="dms" value="D3" /></td>
<td >3</td>
<td >D3</td>
<td >名称3</td>
</tr>
<tr>
<td ><input type="checkbox" name="dms" value="D4" /></td>
<td >4</td>
<td >D4</td>
<td >名称4</td>
</tr>
</tbody>

</table>
需求是,点击删除时可以删除复选框选中的一行或者多行。一般情况下,第一直觉都是按照如下写法:

Js代码 
function onDelete() {
var checks = document.getElementsByName("dms");
var tbBody = document.getElementById("mainBody");
for (var i=0; i<checks.length; i++) {
if (checks[i].checked) {
tbBody.deleteRow(i);
}
}
}
这样写存在一个问题,当第一行被删除时,表格的结构发生了变化,以前的第i+1行变成了现在的第i行,所以按照这种写法无法遍历删除所以选中的行。

正确的写法应该是像下面这样,从最大的行号开始删除,这样第i+1行被删除后不会影响第i行在表格中的行号。

Js代码 
function onDelete() {
var checks = document.getElementsByName("dms");
var tbBody = document.getElementById("mainBody");
for (var i=checks.length-1; i>=0; i--) {
if (checks[i].checked) {
tbBody.deleteRow(i);
}
}
}

【2017-07-03】JS连续删除table中的选中的多行数据的更多相关文章

  1. JQuery 遍历table中的checkbox 并对行数据进行校验

    JQuery中confirm的使用 $(document).ready(function () { $("#Btn_Print").click(function () { var ...

  2. Java-Runoob-高级教程-实例-字符串:03. Java 实例 - 删除字符串中的一个字符

    ylbtech-Java-Runoob-高级教程-实例-字符串:03. Java 实例 - 删除字符串中的一个字符 1.返回顶部 1. Java 实例 - 删除字符串中的一个字符  Java 实例 以 ...

  3. MySQL:如何选取Table中的50到100行

    MySQL:如何选取Table中的50到100行 使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用担心,MySql已 经为我们提供了这样一个功能. ? 1 2 [sql] ...

  4. js循环获取table中的值

    <script type="text/javascript"> function getTdValue() { var tableId = document.getEl ...

  5. Js删除Table中的一行

    <html> <head> <title></title> <script type="text/javascript"> ...

  6. JS实现点击table中任意元素选中

    上项目开发,忙的焦头烂额,博客也没咋更新了. 昨天老师提了个需求,简单的小例子,选择tr中任一行选中tr,觉得很有意思,记录一下: 上代码 <!DOCTYPE html> <html ...

  7. JS循环往table中写入行

    < script > $(function() { $('#test').click(function() { $.ajax({ url: '__APP__/Article/jsonTes ...

  8. js遍历删除数组中不符合条件的元素

    //一般解决方法 let arr = [1,2,3]; for(let i=0; i<arr.length; i++){ if(arr[i]==2){ arr.splice(i, 1); i-- ...

  9. js正则删除字符串中的部分内容

    // 例如 let a = `(ID)444` a.replace(/\(ID\)/ig, '') // 结果 "444"

随机推荐

  1. iOS-UITableView的使用

    6.14.1 UITableViewDataSource协议方法初始化数据      //设置组与组之间的间距     self.tableView.sectionHeaderHeight=5;//f ...

  2. ipad 没有数据线如何上传文件到局域网windows PC 的解决方案

    是的,ios 的封闭性,真麻烦,不想用数据线,还不想用iTunes ,那你找对了. 方案一: (好像只能上传文件,不能下载,能在线查看媒体.) 我的想法是在Windows建立一个http file s ...

  3. OpenGL学习笔记 之一 (基本的图形绘制)

    参考网址:http://www.cnblogs.com/FredCong/archive/2012/10/13/2722893.html #include <glut.h> #includ ...

  4. 使用自定义Comparator对TreeSet中的数据进行多条件排序

    代码记录(需求:根据店铺等级和店铺到某个点的距离进行排序,其中店铺等级由高到低,距离由近及远) 需要排序的对象Store,Store.java package com.zhipengs.work.te ...

  5. 提高.NET应用性能

    提高.NET应用性能的方法 写在前面 设计良好的系统,除了架构层面的优良设计外,剩下的大部分就在于如何设计良好的代码,.NET提供了很多的类型,这些类型非常灵活,也非常好用,比如List,Dictio ...

  6. 4、1 IK分词器

    我们在浏览器地址栏输入 http://127.0.0.1:9200/_analyze?analyzer=chinese&pretty=true&text=我是程序员 默认的中文分词是将 ...

  7. Azure经典虚拟机(Windows)如何监测单个磁盘的使用空间

    Azure云平台创建经典虚拟机(Windows)后,发现仪表板的监测项下默认是没有针对磁盘空间进行检测的指标的 本地机器安装Windows Azure Powershell模块,并通过如下命令登陆并查 ...

  8. 如何解决error: failed to push some refs

    $ git push -u origin master To github.com:a653398363/testtest.git ! [rejected] master -> master ( ...

  9. (4.36)sql server中的waitfor

    关键词:waitfor SQL有定时执行的语句 WaitFor,可以写到一个存储过程中再执行一次 语法:WaitFor{Delay 'time'|Time 'time} Delay后面的时间为延迟多少 ...

  10. C++程序设计学习-第2章

    第二章 变量与基本类型 1.基本内置类型 C++定义了一套包括算术类型和空类型在内的基本数据类型 算术类型:整型和浮点型,包括带符号类型(signed)和无符号类型(unsigned),带符号类型可以 ...