菜鸟-创作你的创作

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

lichongyang

下面给你一套可直接复制运行的完整示例，演示如何用
👉 HTML table + CSS + 原生 JavaScript 实现可编辑表格
不依赖任何框架，适合学习 / 后台系统 / 简单管理页面。

HTML Table + CSS 实现可编辑表格（示例代码）

实现效果：

一、核心思路（先看原理）

实现可编辑表格，一般有两种方式：

  1. contenteditable（最简单） ⭐ 推荐
  2. 点击后把 <td> 替换成 <input>

本文采用 方案一（主流 & 简洁）。

二、完整示例代码（可直接运行）

1️⃣ HTML 结构（table）

&lt;!DOCTYPE html>
&lt;html lang="zh-CN">
&lt;head>
  &lt;meta charset="UTF-8" />
  &lt;title>可编辑表格示例&lt;/title>
  &lt;link rel="stylesheet" href="style.css" />
&lt;/head>
&lt;body>

&lt;table class="editable-table">
  &lt;thead>
    &lt;tr>
      &lt;th>姓名&lt;/th>
      &lt;th>年龄&lt;/th>
      &lt;th>城市&lt;/th>
    &lt;/tr>
  &lt;/thead>
  &lt;tbody>
    &lt;tr>
      &lt;td contenteditable="true">张三&lt;/td>
      &lt;td contenteditable="true">25&lt;/td>
      &lt;td contenteditable="true">北京&lt;/td>
    &lt;/tr>
    &lt;tr>
      &lt;td contenteditable="true">李四&lt;/td>
      &lt;td contenteditable="true">30&lt;/td>
      &lt;td contenteditable="true">上海&lt;/td>
    &lt;/tr>
  &lt;/tbody>
&lt;/table>

&lt;script src="table.js">&lt;/script>
&lt;/body>
&lt;/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();
    }
  });
});

三、效果说明

四、进阶：只允许编辑指定列

例如只允许编辑「年龄」列：

&lt;td contenteditable="true" data-field="age">25&lt;/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' &amp;&amp; isNaN(newValue)) {
  alert('请输入数字');
  cell.innerText = oldValue;
}

七、第二种方案（input 编辑，了解即可）

逻辑：

  1. 点击 td
  2. 创建 input
  3. 替换 td 内容
  4. 失焦保存

适合：

如果你需要我也可以给你完整示例。

八、总结一句话

✔ contenteditable 是实现可编辑表格最快方式
✔ CSS 负责交互体验，JS 负责数据逻辑
✔ 可轻松对接后端接口
✔ 非常适合后台 CRUD 场景

退出移动版