可编辑表格示例 的完整代码 htmld
时间: 2024-02-23 22:10:39 浏览: 131
编辑表格示例
以下是一个完整的可编辑表格示例的 HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>可编辑表格示例</title>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">张三</td>
<td contenteditable="true">25</td>
<td contenteditable="true">男</td>
</tr>
<tr>
<td contenteditable="true">李四</td>
<td contenteditable="true">30</td>
<td contenteditable="true">女</td>
</tr>
<tr>
<td contenteditable="true">王五</td>
<td contenteditable="true">20</td>
<td contenteditable="true">男</td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementById("myTable");
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].addEventListener("input", function() {
console.log(this.innerText);
});
}
}
</script>
</body>
</html>
```
在这个例子中,我们使用了 HTML5 中的 `contenteditable` 属性将表格的每个单元格设置为可编辑。我们使用 JavaScript 为每个单元格添加了一个 `input` 事件监听器,当用户在单元格中输入内容时,`input` 事件会被触发,我们在事件处理程序中使用 `console.log()` 方法输出单元格的文本内容。您可以根据需要修改事件处理程序的代码以实现您想要的功能。
阅读全文