js根据checkbox选中的动态删除添加行
时间: 2023-09-14 10:07:13 浏览: 148
可以使用JavaScript监听checkbox的状态变化事件,当checkbox选中时动态添加行,取消选中时动态删除行。具体实现可以参考以下代码:
HTML代码:
```
<table id="table">
<tr>
<td><input type="checkbox" onchange="handleChange(this)"></td>
<td>第一行</td>
</tr>
<tr>
<td><input type="checkbox" onchange="handleChange(this)"></td>
<td>第二行</td>
</tr>
</table>
```
JavaScript代码:
```
function handleChange(checkbox) {
var table = document.getElementById("table");
var row = checkbox.parentNode.parentNode;
if (checkbox.checked) {
var newRow = table.insertRow(row.rowIndex + 1);
var newCell = newRow.insertCell(0);
newCell.innerHTML = '<input type="checkbox" onchange="handleChange(this)">';
newCell = newRow.insertCell(1);
newCell.innerHTML = '新行';
} else {
table.deleteRow(row.rowIndex + 1);
}
}
```
以上代码实现了当checkbox选中时,在当前行下方添加一行,取消选中时删除当前行下方的行。你可以根据自己的实际需求进行修改。
阅读全文