使用Javascript使表格行可在单击时编辑
的方法如下：
- 首先，为表格的每一行添加一个点击事件监听器，当行被点击时触发编辑模式。
- 在点击事件处理程序中，获取当前被点击的行，并将其转换为可编辑状态。
- 创建一个保存按钮，当点击保存按钮时，将编辑后的数据保存并退出编辑模式。
- 添加取消按钮，当点击取消按钮时，放弃编辑并恢复原始数据。
- 使用HTML的contenteditable属性使表格单元格可编辑。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<tr>
<td contenteditable="true">John Doe</td>
<td contenteditable="true">johndoe@example.com</td>
<td>
<button onclick="editRow(this)">Edit</button>
<button onclick="saveRow(this)">Save</button>
<button onclick="cancelEdit(this)">Cancel</button>
</td>
</tr>
<tr>
<td contenteditable="true">Jane Smith</td>
<td contenteditable="true">janesmith@example.com</td>
<td>
<button onclick="editRow(this)">Edit</button>
<button onclick="saveRow(this)">Save</button>
<button onclick="cancelEdit(this)">Cancel</button>
</td>
</tr>
</table>
<script>
function editRow(button) {
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
for (var i = 0; i < cells.length - 1; i++) {
cells[i].setAttribute("contenteditable", "true");
}
button.style.display = "none";
row.querySelector("button:nth-of-type(2)").style.display = "inline";
row.querySelector("button:nth-of-type(3)").style.display = "inline";
}
function saveRow(button) {
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
for (var i = 0; i < cells.length - 1; i++) {
cells[i].setAttribute("contenteditable", "false");
}
button.style.display = "none";
row.querySelector("button:nth-of-type(1)").style.display = "inline";
row.querySelector("button:nth-of-type(3)").style.display = "none";
}
function cancelEdit(button) {
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
for (var i = 0; i < cells.length - 1; i++) {
cells[i].setAttribute("contenteditable", "false");
cells[i].innerText = cells[i].getAttribute("data-original-value");
}
button.style.display = "none";
row.querySelector("button:nth-of-type(1)").style.display = "inline";
row.querySelector("button:nth-of-type(2)").style.display = "none";
}
</script>
</body>
</html>这段代码创建了一个简单的表格，每一行都有一个编辑按钮。当点击编辑按钮时，对应行的单元格将变为可编辑状态。保存按钮用于保存编辑后的数据，取消按钮用于放弃编辑并恢复原始数据。
请注意，这只是一个简单的示例，实际应用中可能需要更复杂的逻辑和验证。此外，这个示例中使用了纯Javascript和HTML来实现，没有使用任何特定的云计算产品。
希望这个答案能够满足你的需求。如果有任何问题，请随时提问。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
