js 删除表格内所选行内容
时间: 2023-09-09 16:11:31 浏览: 93
要删除表格中所选行的内容,你可以使用 JavaScript 来遍历表格的行,找到所选行并将其从表格中删除。下面是一个简单的示例代码:
```javascript
// 获取表格对象
var table = document.getElementById("myTable");
// 获取选中的行
var selectedRows = table.querySelectorAll("tr.selected");
// 遍历选中的行并删除
for (var i = 0; i < selectedRows.length; i++) {
selectedRows[i].remove();
}
```
在这个示例中,我们首先获取了 ID 为 "myTable" 的表格对象,然后使用 `querySelectorAll` 方法获取所有 class 为 "selected" 的行。接下来,我们遍历这些选中的行,并使用 `remove` 方法将它们从表格中删除。
注意,这只是一个简单的示例代码,实际情况可能会有所不同。你需要根据你的具体需求进行修改和调整。
相关问题
js对表格增加与批量删除内容代码
可以使用JavaScript的DOM操作来实现对表格的增加与批量删除操作。具体实现方法可以参考以下示例代码:
1. 增加表格行:
```javascript
// 获取表格
var table = document.getElementById('table');
// 创建新行
var newRow = table.insertRow();
// 设置新行单元格内容
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
cell1.innerHTML = 'Cell 1';
cell2.innerHTML = 'Cell 2';
```
2. 删除表格行:
```javascript
// 获取表格
var table = document.getElementById('table');
// 获取所有行
var rows = table.getElementsByTagName('tr');
// 循环删除行
for (var i = 1; i < rows.length; i++) { // 忽略表头行
// 获取复选框
var checkbox = rows[i].getElementsByTagName('input')[0];
if (checkbox.checked) {
// 删除行
table.deleteRow(i);
i--; // 删除后需要将索引减1
}
}
```
注意:以上代码仅供参考,具体实现需要根据实际情况进行修改。同时,该代码未考虑浏览器兼容性,请谨慎使用。
打开“js删除表格行.html”,完成如下效果,点击“删除”后,会把当前表格行删除。(选做) 提示:要删除一个结点的方法为:结点对象名.remove(); this代表的是当前发生事件的结点。获取当前结点的父节点的方法为:结点对象名.parentNode
以下是实现该功能的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>删除表格行</title>
</head>
<body>
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
<td><a href="#" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>2222</td>
<td>2222</td>
<td><a href="#" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>3333</td>
<td>3333</td>
<td><a href="#" onclick="deleteRow(this)">删除</a></td>
</tr>
</table>
<script>
function deleteRow(link) {
var row = link.parentNode.parentNode;
row.remove();
}
</script>
</body>
</html>
```
在上面的示例中,我们在每个“删除”链接上添加了一个 onclick 事件处理函数 `deleteRow(this)`,这里的 `this` 表示当前点击的链接元素。在 `deleteRow` 函数中,首先获取到当前行的元素,方法是通过链接元素的父节点获取其所在的行元素,然后调用 `remove()` 方法将其从 DOM 树中移除。
阅读全文