html表格点击编辑按钮,将当前行的姓名变成文本框,当前编辑按钮文本变成确定,在姓名文本框中输出值后点击确定按钮,姓名文本框的内容放到姓名td中
时间: 2024-04-10 22:26:59 浏览: 12
你可以使用JavaScript来实现这个功能。首先,你需要给编辑按钮添加一个点击事件,当点击按钮时,触发一个函数来切换姓名单元格的展示方式。具体的实现步骤如下:
1. 在HTML中,创建一个表格,其中每一行包含一个编辑按钮和一个姓名单元格:
```html
<table>
<tr>
<td><button class="edit-btn" onclick="editName(this)">编辑</button></td>
<td class="name-cell">John Doe</td>
</tr>
<tr>
<td><button class="edit-btn" onclick="editName(this)">编辑</button></td>
<td class="name-cell">Jane Smith</td>
</tr>
<!-- 更多行 -->
</table>
```
2. 使用JavaScript编写`editName`函数来实现编辑功能:
```javascript
function editName(button) {
var row = button.parentNode.parentNode; // 获取当前行
var nameCell = row.querySelector('.name-cell'); // 获取姓名单元格
// 创建输入框元素
var input = document.createElement('input');
input.type = 'text';
input.value = nameCell.textContent;
// 替换姓名单元格为输入框
nameCell.innerHTML = '';
nameCell.appendChild(input);
// 修改按钮文本为确定
button.textContent = '确定';
// 给确定按钮添加点击事件
button.onclick = function() {
// 获取输入框的值
var newName = input.value;
// 替换输入框为文本内容
nameCell.innerHTML = newName;
// 修改按钮文本为编辑
button.textContent = '编辑';
// 给编辑按钮重新绑定点击事件
button.onclick = function() {
editName(button);
};
};
}
```
这样,当你点击编辑按钮时,将会把姓名单元格替换为文本框,编辑按钮的文本也会变成确定。当你在文本框中输入值后点击确定按钮,文本框的内容会放到姓名单元格中,同时按钮的文本会变回编辑。点击编辑按钮后,将会重新绑定编辑功能。你可以根据需要在表格中添加更多的行来实现相同的功能。