应用:删除表格选中的一行或多行。
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);
}
}
}
分享到:
相关推荐
于是准备用deleteRow方法和onChecked和onUncheck事件配合使用,来完成多行删除功能。 当用户勾选一行时,触发onChecked事件,将onChecked事件传进来的index索引push到一个全局array中。 当用户取消勾选的时候,...
主要对table insertRow、deleteRow定义和用法做下总结,需要的朋友可以参考下
删除表指定行的方法。。。。。。。。。。。。。。。。
本篇文章主要介绍了javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法)需要的朋友可以过来参考下,希望对大家有所帮助
本文为大家介绍下table对象insertRow deleteRow的使用示例,适合新手朋友们
JS的表格对象有一个deleteRow方法用于删除表格中的指定行,只需要指定行号即可 <!DOCTYPE html> <html> <head> [removed] function deleteRow(r) { var i=r[removed][removed].rowIndex; document....
matlab开发-DeleteRowIfGPSIsNaninputargs。从任何给定的维克托数据中删除nan
HTML&DOM; &DOM;
3.4.2 deleteRow 85 3.4.3 getOrderForMulLine 86 3.4.4 getFirstOrderForMulLine 86 3.4.5 getLastOrderForMulLine 86 3.4.6 getRecentDeletedTBody 87 3.4.7 getInnerOrderForMulLine 88 3.4.8 ...
利用javascript来结合html,可以动态的添加一行数据,和根据索引来删除一行数据。
objTable.deleteRow(lastIndex); } //添加列 function addCol() { var objTable = document.getElementById("tb2"); var count = objTable.rows[0].cells.length; var rowscount = objTable.rows.length; //获取...
删除一行:deleterow(Q, R, k) 删除 A 的第 k 行时更新 A 的细 QR 分解。 例子: A = rand(5,3); [Q, R] = qr(A, 0); [Q_1, R_1] = deleterow(Q, R, 3); 删除列:deletecolumn(Q, R, k) 删除 A 的第 k 列时更新 A
merge-table HTML表格设计器可以快速的可视化设计一个表格,可以对单元格进行合并,拆分,添加...deleteRow 删除行MergeTable.deleteRow(); addRowTop 在当前选中的单元格上方添加行MergeTable.addRowTop(); addRowBot
从JeasyUI出下载demo后获得easyui文件夹,把它加到项目中去,建立好Image文件夹,因为要用到图片,也要建立jsonbyfzl.js,因为要把dataGrid的数据转成json,所以需要用到它 即var data =JSON.stringify(Rows);...
asp.net无刷新操作表格(增加,删除行),包括后台如何取值 //插入空白行 function insertRow(){ var table=document.getElementById('TestTable'); var tr=table.insertRow(); var datalength=table.rows....
如下所示: 代码如下://动态添加行function addRow(){ var table = document.getElementById(“tableID”); var newRow = table.insertRow(); //创建新行 var ...//动态删除行function deleteRow(){ var rowI
JavaScript代码: 代码如下: [removed] function addrows(){ var len = optionlist.rows.length; //得到table的行数 var obj = optionlist.insertRow(len);//在最后一行插入 /**插入第一列**... } function deleterow()