修改上面代码,点击编辑按钮,表格单元变成可编辑的输入框进行修改
时间: 2024-05-08 17:15:06 浏览: 11
以下是修改后的代码:
HTML部分:
```
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">John</td>
<td contenteditable="true">28</td>
<td contenteditable="true">New York</td>
<td><button onclick="editRow(this)">Edit</button></td>
</tr>
<tr>
<td contenteditable="true">Mary</td>
<td contenteditable="true">25</td>
<td contenteditable="true">Los Angeles</td>
<td><button onclick="editRow(this)">Edit</button></td>
</tr>
<tr>
<td contenteditable="true">Bob</td>
<td contenteditable="true">30</td>
<td contenteditable="true">Chicago</td>
<td><button onclick="editRow(this)">Edit</button></td>
</tr>
</tbody>
</table>
```
JavaScript部分:
```
function editRow(button) {
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
for (var i = 0; i < cells.length - 1; i++) {
var cell = cells[i];
var text = cell.innerHTML;
cell.innerHTML = '<input type="text" value="' + text + '">';
}
button.innerHTML = "Save";
button.onclick = function() { saveRow(this); };
}
function saveRow(button) {
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
for (var i = 0; i < cells.length - 1; i++) {
var cell = cells[i];
var input = cell.getElementsByTagName("input")[0];
var text = input.value;
cell.innerHTML = text;
}
button.innerHTML = "Edit";
button.onclick = function() { editRow(this); };
}
```
在修改后的代码中,我们给每个单元格添加了 `contenteditable="true"` 属性,这使得单元格内容可编辑。在 `editRow` 函数中,我们把单元格内容替换成了包含文本框的 HTML 代码,这样就可以编辑单元格了。在 `saveRow` 函数中,我们获取了每个单元格中的文本框的值,然后把单元格内容替换成了这个值,这样就完成了单元格的修改。