html table+css实现可编辑表格的示例代码

静静的湖畔2024 · 发表于 2024-4-19 20:17:23

要实现可编辑的 HTML 表格，你可以使用 JavaScript 和 HTML5 的 contenteditable 属性。

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table id="editableTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">John Doe</td>
<td contenteditable="true">25</td>
<td contenteditable="true">Male</td>
</tr>
<tr>
<td contenteditable="true">Jane Smith</td>
<td contenteditable="true">30</td>
<td contenteditable="true">Female</td>
</tr>
</tbody>
</table>
<script>
// 获取可编辑表格
var table = document.getElementById('editableTable');
// 遍历表格，为每个单元格添加事件侦听器
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.textContent);
});
}
}
</script>
</body>
</html>

复制代码

在上述示例中，使用了 contenteditable 属性来使表格单元格可编辑。添加 contenteditable="true" 属性的单元格可以被鼠标点击并接受用户输入。
JavaScript 部分遍历表格的所有单元格，并为每个单元格添加输入事件侦听器。在输入事件处理程序中，你可以根据需要处理用户的输入，比如更新数据或触发其他操作。
点击表格前：

点击表格后：

到此这篇关于html table+css实现可编辑表格的示例代码的文章就介绍到这了,更多相关html可编辑表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

likobe1986 · 发表于 2024-5-1 05:14:23

说得太好了，完全同意！

saralolita · 发表于 2024-5-16 23:47:22

能给个链接吗？我想深入了解一下。

至尊龙魔神 · 发表于 2024-5-29 14:54:18

666666666666666666

海参猪饲料 · 发表于 2024-6-1 06:49:29

说得太好了，完全同意！

你蒙娜丽莎 · 发表于 2024-7-4 20:08:29

666666666666

清河桥士 · 发表于 2024-9-5 20:47:20

我们一起努力，共同解决问题吧。

是的撒 · 发表于 2024-9-6 12:12:53

我们一起努力，共同解决问题吧。

11274712 · 发表于 2024-9-18 14:30:01

这个话题很有趣，我想多了解一些

2594954 · 发表于 2024-10-6 07:27:19

让我们一起努力

		自动登录	找回密码
密码			立即注册

html table+css实现可编辑表格的示例代码

本帖子中包含更多资源

热心会员

付费会员