• 【2017-07-03】JS连续删除table中的选中的多行数据


    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);
    }
    }
    }

     

  • 相关阅读:
    一个比较好用的网络库
    Live Writer Beta 测试
    WinForm中如何设置MDI父窗体的背景图片
    使文件下载的自定义连接支持 FlashGet 的断点续传多线程链接下载! C#/ASP.Net 实现! 转
    关于从剪贴板获得截图
    我的作品图书馆信息管理系统
    很久以前用VB写的小游戏
    Web2.0时代,RSS你会用了吗?_CSDN
    VFP下利用API调用帮助
    VFP中轻松绑定 Windows 事件
  • 原文地址:https://www.cnblogs.com/qq609113043/p/7109536.html
Copyright © 2020-2023  润新知