用js生成一个带删除功能操作列的表格
时间: 2023-05-24 21:04:11 浏览: 59
以下是一个用 JavaScript 生成带删除功能操作列的表格的示例代码:
HTML:
```
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
JavaScript:
```
// 获取表格对象
var table = document.getElementById("myTable");
// 定义表格数据
var data = [
{ name: "Tom", age: 25 },
{ name: "Jerry", age: 22 },
{ name: "John", age: 30 }
];
// 创建表格行和列,添加到表格中
for (var i = 0; i < data.length; i++) {
// 创建新行
var row = table.insertRow();
// 创建新列并添加数据
var nameCell = row.insertCell();
nameCell.innerHTML = data[i].name;
var ageCell = row.insertCell();
ageCell.innerHTML = data[i].age;
// 创建删除按钮列
var actionCell = row.insertCell();
var deleteBtn = document.createElement("button");
deleteBtn.innerText = "Delete";
deleteBtn.addEventListener("click", function() {
// 删除按钮所在的行
var row = this.parentNode.parentNode;
row.parentNode.removeChild(row);
});
actionCell.appendChild(deleteBtn);
}
```
该示例代码首先获取了表格对象,然后定义了表格数据。接着,通过循环创建表格行和列,最后创建了带有删除功能的按钮列并将其添加到每一行中。删除按钮的点击事件会删除其所在的行。