,可以通过以下步骤实现:
<td>
<button onclick="editCell(this)">编辑</button>
</td>
function editCell(button) {
// 获取当前按钮所在的单元格
var cell = button.parentNode;
// 获取单元格的内容
var content = cell.innerHTML;
// 创建一个输入框元素
var input = document.createElement("input");
input.type = "text";
input.value = content;
// 将输入框添加到单元格中
cell.innerHTML = "";
cell.appendChild(input);
// 设置输入框失去焦点时的处理函数
input.onblur = function() {
// 获取输入框的值
var newValue = input.value;
// 将输入框的值赋给单元格
cell.innerHTML = newValue;
};
}
以上代码会在点击按钮时,将按钮所在的单元格内容替换为一个可编辑的输入框。当输入框失去焦点时,将输入框的值赋给单元格,并恢复原始的按钮。
这种方法可以用于任意表格中需要编辑的单元格,可以灵活地应用于各种场景,比如数据表格、表单等。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云