【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);
}
}
}
【2017-07-03】JS连续删除table中的选中的多行数据的更多相关文章
- JQuery 遍历table中的checkbox 并对行数据进行校验
JQuery中confirm的使用 $(document).ready(function () { $("#Btn_Print").click(function () { var ...
- Java-Runoob-高级教程-实例-字符串:03. Java 实例 - 删除字符串中的一个字符
ylbtech-Java-Runoob-高级教程-实例-字符串:03. Java 实例 - 删除字符串中的一个字符 1.返回顶部 1. Java 实例 - 删除字符串中的一个字符 Java 实例 以 ...
- MySQL:如何选取Table中的50到100行
MySQL:如何选取Table中的50到100行 使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用担心,MySql已 经为我们提供了这样一个功能. ? 1 2 [sql] ...
- js循环获取table中的值
<script type="text/javascript"> function getTdValue() { var tableId = document.getEl ...
- Js删除Table中的一行
<html> <head> <title></title> <script type="text/javascript"> ...
- JS实现点击table中任意元素选中
上项目开发,忙的焦头烂额,博客也没咋更新了. 昨天老师提了个需求,简单的小例子,选择tr中任一行选中tr,觉得很有意思,记录一下: 上代码 <!DOCTYPE html> <html ...
- JS循环往table中写入行
< script > $(function() { $('#test').click(function() { $.ajax({ url: '__APP__/Article/jsonTes ...
- js遍历删除数组中不符合条件的元素
//一般解决方法 let arr = [1,2,3]; for(let i=0; i<arr.length; i++){ if(arr[i]==2){ arr.splice(i, 1); i-- ...
- js正则删除字符串中的部分内容
// 例如 let a = `(ID)444` a.replace(/\(ID\)/ig, '') // 结果 "444"
随机推荐
- iOS-UITableView的使用
6.14.1 UITableViewDataSource协议方法初始化数据 //设置组与组之间的间距 self.tableView.sectionHeaderHeight=5;//f ...
- ipad 没有数据线如何上传文件到局域网windows PC 的解决方案
是的,ios 的封闭性,真麻烦,不想用数据线,还不想用iTunes ,那你找对了. 方案一: (好像只能上传文件,不能下载,能在线查看媒体.) 我的想法是在Windows建立一个http file s ...
- OpenGL学习笔记 之一 (基本的图形绘制)
参考网址:http://www.cnblogs.com/FredCong/archive/2012/10/13/2722893.html #include <glut.h> #includ ...
- 使用自定义Comparator对TreeSet中的数据进行多条件排序
代码记录(需求:根据店铺等级和店铺到某个点的距离进行排序,其中店铺等级由高到低,距离由近及远) 需要排序的对象Store,Store.java package com.zhipengs.work.te ...
- 提高.NET应用性能
提高.NET应用性能的方法 写在前面 设计良好的系统,除了架构层面的优良设计外,剩下的大部分就在于如何设计良好的代码,.NET提供了很多的类型,这些类型非常灵活,也非常好用,比如List,Dictio ...
- 4、1 IK分词器
我们在浏览器地址栏输入 http://127.0.0.1:9200/_analyze?analyzer=chinese&pretty=true&text=我是程序员 默认的中文分词是将 ...
- Azure经典虚拟机(Windows)如何监测单个磁盘的使用空间
Azure云平台创建经典虚拟机(Windows)后,发现仪表板的监测项下默认是没有针对磁盘空间进行检测的指标的 本地机器安装Windows Azure Powershell模块,并通过如下命令登陆并查 ...
- 如何解决error: failed to push some refs
$ git push -u origin master To github.com:a653398363/testtest.git ! [rejected] master -> master ( ...
- (4.36)sql server中的waitfor
关键词:waitfor SQL有定时执行的语句 WaitFor,可以写到一个存储过程中再执行一次 语法:WaitFor{Delay 'time'|Time 'time} Delay后面的时间为延迟多少 ...
- C++程序设计学习-第2章
第二章 变量与基本类型 1.基本内置类型 C++定义了一套包括算术类型和空类型在内的基本数据类型 算术类型:整型和浮点型,包括带符号类型(signed)和无符号类型(unsigned),带符号类型可以 ...