`

deleteRow() 连续删除多行

    博客分类:
  • js
 
阅读更多

    应用:删除表格选中的一行或多行。

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>

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

 

 

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行在表格中的行号。

 

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

 

分享到:
评论

相关推荐

    JTable数据库基本操作多行增删改查

    * 删除操作:使用 deleteRow() 方法可以删除一行数据从模型中。 * 保存操作:使用 saveRow() 方法可以保存一行数据到模型中。 * 获取操作:使用 getRow() 方法可以获取一行数据从模型中。 ChangeList 在 ...

    ADF 删除多行

    本篇文章将详细讲解如何在ADF环境中利用Java开发工具JDeveloper实现表格(Table)中的多行删除功能,以及与之相关的`ADF checkbox`使用。 ADF Table组件是ADF UI组件库中的一个重要组成部分,它允许用户在界面上以...

    jquery实现的可增加,删除行,可多行上下移动表格

    标题 "jquery实现的可增加,删除行,可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行,以及上下移动表格中的行,提供了更灵活的数据操作体验...

    删除表指定行的方法。~

    ### 删除表指定行的方法 在.NET开发环境中,对数据库的操作是一项常见的任务。特别是当涉及到数据管理时,能够精确地删除特定行是非常重要的。这里我们将详细介绍如何在.NET框架中实现这一功能。 #### 1. 基本概念...

    javascript DOM操作之动态删除TABLE多行

    获取到行索引后,使用表格元素的`deleteRow(rowIndex)`方法删除对应的行。由于在删除行后,循环的索引会错位,所以将循环变量`i`设置为`-1`,这样可以跳过当前循环中删除的行,避免遗漏后面的行。这就是实现动态删除...

    Easyui笔记2:实现datagrid多行删除的示例代码

    在本文中,我们将探讨如何在EasyUI的Datagrid组件中实现多行删除功能。EasyUI是一个基于jQuery的轻量级前端框架,它提供了一系列的组件,包括Datagrid,用于展示和操作表格数据。在开发前端界面时,有时我们需要提供...

    JS 实现动态插入输入框以及删除、位置调换

    ### JS 实现动态插入输入框以及删除、位置调换 #### 概述 在Web开发中,经常需要根据用户操作动态地添加或移除表单元素。本文将深入探讨如何利用JavaScript来实现动态插入文本输入框及对其进行删除与位置调整的...

    table insertRow、deleteRow定义和用法总结

    例如,调用`table.deleteRow(index)`会在指定行号的位置删除一行。如果`index`无效,也会抛出`INDEX_SIZE_ERR` DOMException异常。以下代码演示了如何删除表格的第一行: ```html function delRow() { document...

    js 添加删除表格

    &lt;button onclick="deleteRow()"&gt;删除行 ``` 这里的按钮会调用对应的JavaScript函数,实现表格的动态增删。 需要注意的是,为了保持良好的代码结构和可维护性,通常会推荐使用事件监听器而不是内联事件处理函数,...

    JSP中使用JavaScript动态插入删除输入框实现代码.docx

    删除选项" onClick="deleterow();"/&gt; ``` 三、table标签的设置 在JSP页面中,我们需要设置table标签的id,以便JavaScript能够识别该table。下面是实现代码: ```jsp &lt;table id="optionlist"&gt;&lt;/table&gt; ``` 四、...

    table对象中的insertRow与deleteRow使用示例

    在示例中,`test2` 函数用于删除表格的最后一行,通过调用 `deleteRow()` 并传入 `mytable.rows.length - 1`,这表示删除最后一个行。 ### 示例解析 在这个HTML文档中,我们有一个名为 "英雄排行榜" 的表格,包含了...

    javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

    其次,`deleteRow()`方法用于删除表格中的某一行。其语法是`tablerowObject.deleteCell(index)`,`tablerowObject`是行的引用,`index`是要删除的行的索引。如果`index`超出范围,同样会抛出`INDEX_SIZE_ERR`异常。...

    js应用之动态增加,删除一行

    删除行的函数`deleteRow`则是通过事件监听来触发,获取触发事件的按钮所在的行,并进行删除。 为了让删除按钮生效,我们需要在页面加载完成后绑定事件监听器: ```javascript document.addEventListener('...

    js删除本行代码

    4. **删除行的逻辑**:定义`deleteRow()`函数,该函数接受一个参数,即触发删除操作的按钮对象。通过访问这个按钮的父节点,找到其所在的`&lt;tr&gt;`,并获取该行在表格中的索引。然后,使用`deleteRow(rowIndex)`方法从...

    利用jquery超级简单实现添加行删除行

    var newRow = '&lt;tr&gt;&lt;td&gt;新姓名&lt;/td&gt;&lt;td&gt;新年龄&lt;/td&gt;&lt;td&gt;&lt;button class="deleteRow"&gt;删除&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;'; $('#myTable tbody').append(newRow); }); // 删除行事件 $('#myTable').on('click', '....

    JS动态添加删除HTML元素(实例)

    在删除行时,我们使用 `deleteRow` 方法将行删除。同时,我们也可以使用 `removeChild` 方法将元素删除。 在我们的示例中,我们还使用了 JavaScript 事件来实现行的删除。当用户点击删除按钮时,我们使用 `...

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    动态添加/删除表格行并提交内容到后台

    `addRow`函数用于插入新行,而`deleteRow`函数则删除包含删除按钮的行。 接下来,我们需要关注后端部分。这里我们使用C#,一种常用的语言,用于构建ASP.NET Web应用程序。当用户点击按钮并提交数据时,我们需要处理...

Global site tag (gtag.js) - Google Analytics