下面给你一套可直接复制运行的完整示例，演示如何用
👉 HTML table + CSS + 原生 JavaScript 实现可编辑表格
不依赖任何框架，适合学习 / 后台系统 / 简单管理页面。
HTML Table + CSS 实现可编辑表格（示例代码）
实现效果：
- ✅ 双击单元格即可编辑
- ✅ 回车保存 / 失焦保存
- ✅ 样式清晰、易扩展
- ✅ 原生 JS，无依赖
一、核心思路（先看原理）
实现可编辑表格，一般有两种方式：
contenteditable（最简单） ⭐ 推荐- 点击后把
<td>替换成<input>
本文采用 方案一（主流 & 简洁）。
二、完整示例代码（可直接运行）
1️⃣ HTML 结构（table）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>可编辑表格示例</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table class="editable-table">
<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>
</tbody>
</table>
<script src="table.js"></script>
</body>
</html>
2️⃣ CSS 样式（style.css）
body {
font-family: Arial, Helvetica, sans-serif;
padding: 30px;
}
.editable-table {
width: 60%;
border-collapse: collapse;
}
.editable-table th,
.editable-table td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.editable-table th {
background-color: #f5f5f5;
}
/* 可编辑单元格样式 */
.editable-table td[contenteditable="true"] {
background-color: #fff;
cursor: pointer;
}
/* 编辑中高亮 */
.editable-table td[contenteditable="true"]:focus {
outline: none;
background-color: #e6f7ff;
border-color: #1890ff;
}
3️⃣ JavaScript（table.js）
const cells = document.querySelectorAll(
'.editable-table td[contenteditable="true"]'
);
cells.forEach(cell => {
let oldValue = '';
// 获得焦点时，记录旧值
cell.addEventListener('focus', () => {
oldValue = cell.innerText;
});
// 失去焦点时，保存数据
cell.addEventListener('blur', () => {
const newValue = cell.innerText;
if (oldValue !== newValue) {
console.log('数据已修改：', newValue);
// TODO：在这里调用接口，提交修改后的数据
}
});
// 回车键保存并退出编辑
cell.addEventListener('keydown', e => {
if (e.key === 'Enter') {
e.preventDefault();
cell.blur();
}
});
});
三、效果说明
- 🖱 单击 / 双击单元格 → 进入编辑
- ⌨ 回车键 → 保存并退出
- 🖱 点击其他区域 → 自动保存
- 🎨 编辑时单元格高亮
四、进阶：只允许编辑指定列
例如只允许编辑「年龄」列：
<td contenteditable="true" data-field="age">25</td>
JS 中读取：
const field = cell.dataset.field;
五、进阶：数据提交到后端（示意）
fetch('/api/update', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
field: field,
value: newValue
})
});
六、常见坑位提醒（很重要）
❗ 1. contenteditable 会允许粘贴 HTML
解决（只保留纯文本）：
cell.addEventListener('paste', e => {
e.preventDefault();
const text = e.clipboardData.getData('text/plain');
document.execCommand('insertText', false, text);
});
❗ 2. 回车会换行
已在示例中用：
e.preventDefault();
❗ 3. 数字校验
if (cell.dataset.type === 'number' && isNaN(newValue)) {
alert('请输入数字');
cell.innerText = oldValue;
}
七、第二种方案（input 编辑，了解即可）
逻辑：
- 点击 td
- 创建 input
- 替换 td 内容
- 失焦保存
适合：
- 严格表单校验
- 大型后台系统
如果你需要我也可以给你完整示例。
八、总结一句话
✔ contenteditable 是实现可编辑表格最快方式
✔ CSS 负责交互体验，JS 负责数据逻辑
✔ 可轻松对接后端接口
✔ 非常适合后台 CRUD 场景
发表回复