【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);
}
}
}
转载于:https://www.cnblogs.com/qq609113043/p/7109536.html
【2017-07-03】JS连续删除table中的选中的多行数据相关推荐
- js动态删除表格中的某一行
js动态删除表格中的某一行 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- js之删除对象中的属性——delete、es6解构赋值、自执行匿名函数
js之删除对象中的属性--delete.es6解构赋值.自执行匿名函数 实例 const person = {name: '李世民',gender: 'male',age: 24 };// 删除目标对 ...
- R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象
R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象 目录 R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象 #data.t ...
- linux文件删除指定内容,Linux bash删除文件中含“指定内容”的行功能示例
本文实例讲述了Linux bash删除文件中含"指定内容"的行功能.分享给大家供大家参考,具体如下: #!/bin/sh # 功能: 删除文件中含"指定内容"的 ...
- python删除文本中指定内容_Python实现删除文件中含“指定内容”的行示例
本文实例讲述了Python实现删除文件中含指定内容的行.分享给大家供大家参考,具体如下: #!/bin/env python import shutil,sys,os darray = [ " ...
- bash删除文件中含指定内容的行
#!/bin/sh # 功能: 删除文件中含"指定内容"的行 # 运行方式: ./dline.sh c.log ==> 产生输出文件: c.log0array=(" ...
- [bash]删除文件中含特定字符串的行
]删除文件中含特定字符串的行[bash]: sed -e '/abc/d' a.txt // 删除a.txt中含"abc"的行,但不改变a.txt文件本身,操作之后的结果在终 ...
- linux删除具有指定内容的文件,Linux bash删除文件中含“指定内容”的行功能示例...
本文实例讲述了Linux bash删除文件中含"指定内容"的行功能.分享给大家供大家参考,具体如下: #!/bin/sh # 功能: 删除文件中含"指定内容"的 ...
- python删除文件部分内容_Python实现删除文件中含“指定内容”的行示例
本文实例讲述了Python实现删除文件中含指定内容的行.分享给大家供大家参考,具体如下: #!/bin/env python import shutil, sys, os darray = [ &qu ...
最新文章
- 微信小程序数据拼接_微信小程序用户数据解密算法Java版
- python基础——迭代器与生成器
- SAP CRM Fiori busy dialog的工作原理
- Extjs time
- Flask入门到放弃(四)—— 数据库
- java mybatis 教程_(整理)MyBatis入门教程(一)
- 云图说|读请求太多怎么办?一键读写分离来帮忙
- micropython lcd12864_Esp8266+ssd1306液晶屏+microPython(2020-09-25)
- Fragment 和 FragmentActivity的使用(二)
- windows启动管理器怎么修复计算机,如果启动管理器丢失怎么办
- 金融IT和ERP,哪个更有前途?
- Excel中的VLOOKUP函数之数据匹配
- 重写系统黑色的TabBar
- 台湾“比基尼登山客”遗体运出 山友接其“回家”
- offsetWidth offsetHeight和clientWidth clientHeight的区别
- 计算机鼠标双击怎么,讲解电脑鼠标左键单击变双击怎么办
- 关于分辨率,你该知道这些!
- 力扣刷题-题目以及答案
- php获取qq空间,使用php批量抓取QQ空间相册链接
- 【Linux】VirtualBox设置静态ip