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. weblogic12.1.3安装

    weblogic weblogic12.1.3安装 环境: centos7.5 ip: 192.168.0.94 1.安装jdk 2.安装 weblogic 下载.解压安装包 wls1213_dev. ...

  2. (1)、JEasyUI 之 Datagrid的Combobox 显示 textField 值的问题

    (1).JEasyUI 之datagrid的Combobox显示textField值的问题 官方的datagrid Demo Row Editing in DataGrid 中field 是否如下定义 ...

  3. 欧姆龙NX1P 输送马达功能块

    一个简单的马达输送轨道功能块,需要的小伙伴可以参考下,个人能力有限,不足的地方还请包涵. 下载链接:https://pan.baidu.com/s/1V1gioE0boDpaUsR5cqQ5dg

  4. C#使用KingAOP实现AOP面向切面编程二

    本文继续上篇讲述一下比较复杂点的AOP例子,先新建一个控制台项目,然后同样先在Nuget中搜索安装KingAop到项目中 1.项目结构 2 .定义一个登录实体类User和LoggingAspect切面 ...

  5. mysql 查询某一天数据

    某个场景下需要查询某一天的数据,例如2017/9/27这一天所有的数据量,有以下几个方法. SELECT * FROM cms_book_statistics WHERE substring(Conv ...

  6. 开源定时任务框架Quartz(一)

    简介 Quartz是OpenSymphony开源组织的一个开源项目,定时任务框架,纯Java语言实现,最新版本为2.3.0. 设计模式 Quartz中使用的设计模式如下: 1.Builder模式 2. ...

  7. 剑指offer58:对称的二叉树。判断一颗二叉树是不是对称的,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的

    1 题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 2 思路和方法 定义一种遍历算法,先遍历右子结点再遍历左子结点:如对称先序 ...

  8. re 模块与正则表达式

    目录 re 模块 re 模块的基本使用 re 模块 正则表达式与re模块的关系 1:正则表达式是一门独立的技术. 2:正则在任何语言中均可以使用. 3:python中要想使用正则表达式需要通过re模块 ...

  9. Nginx学习笔记(三):Nginx 请求处理

    Request Nginx 中的 ngx_http_request_t 是对一个 http 请求的封装: 一个 http 请求包含:请求行.请求头.请求体,响应行.响应头.响应体 Nginx 处理请求 ...

  10. ActiveMQ 简单应用

    ActiveMQ简单应用到复杂的订单模块,提高前台的访问速度. 一.当提交订单后,发送消息给ActiveMQ. @Service public class JmsSend { private stat ...