在表格每一行的最后一列添加删除和修改按钮 点击“删除”按钮删除当前行 点击“修改”按钮,可以修改当前行信息
时间: 2023-05-22 10:05:09 浏览: 111
您可以使用以下代码来实现:
```
function addButtonsToTable(tableId) {
var table = document.getElementById(tableId);
var rows = table.rows;
for (var i = 0; i < rows.length; i++) {
var deleteButton = document.createElement("button");
deleteButton.innerHTML = "删除";
deleteButton.onclick = function() {
var currentRow = this.closest("tr");
currentRow.remove();
};
var editButton = document.createElement("button");
editButton.innerHTML = "修改";
editButton.onclick = function() {
var currentRow = this.closest("tr");
var cells = currentRow.cells;
for (var j = 0; j < cells.length - 1; j++) {
var cell = cells[j];
var input = document.createElement("input");
input.type = "text";
input.value = cell.innerHTML;
cell.innerHTML = "";
cell.appendChild(input);
}
this.innerHTML = "保存";
this.onclick = function() {
var cells = currentRow.cells;
for (var j = 0; j < cells.length - 1; j++) {
var cell = cells[j];
var input = cell.getElementsByTagName("input")[0];
cell.innerHTML = input.value;
}
this.innerHTML = "修改";
this.onclick = arguments.callee;
};
};
var buttonCell = rows[i].insertCell(-1);
buttonCell.appendChild(deleteButton);
buttonCell.appendChild(editButton);
}
}
```
您只需在表格生成后调用 `addButtonsToTable(tableId)` 并将表格的 ID 作为参数传递即可实现。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)