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

当前位置：电视猫 > HTML/Xhtml>

电视猫时间： 2024-07-13 09:24:10

使用 HTML、CSS 和 JavaScript 实现可编辑表格

以下是一个简单的示例，演示如何使用 HTML、CSS 和 JavaScript 创建可编辑表格：

HTML（index.html）

HTML

<!DOCTYPE html>
<html>
<head>
  <title>可编辑表格</title>
  <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>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td contenteditable="true">张三</td>
        <td contenteditable="true">30</td>
        <td contenteditable="true">男</td>
      </tr>
      <tr>
        <td contenteditable="true">李四</td>
        <td contenteditable="true">25</td>
        <td contenteditable="true">女</td>
      </tr>
      </tbody>
  </table>

  <script>
    // 获取可编辑表格
    const table = document.getElementById('editableTable');

    // 遍历表格，为每个单元格添加事件侦听器
    for (let i = 0; i < table.rows.length; i++) {
      for (let j = 0; j < table.rows[i].cells.length; j++) {
        table.rows[i].cells[j].addEventListener('input', function() {
          // 处理输入事件，例如更新数据或触发其他操作
          console.log(this.textContent);
        });
      }
    }
  </script>
</body>
</html>

解释：

HTML：
- 创建一个 <table> 元素，并设置 id 属性以便通过 JavaScript 引用。
- 使用 <thead> 和 <tbody> 元素定义表头和表体。
- 每个单元格 (<th> 和 <td>) 都包含要显示的数据。
- 为要使其可编辑的单元格添加 contenteditable="true" 属性。
CSS：
- 此 CSS 用于设置表格的基本样式，例如边框、边距和对齐方式。您可以根据需要自定义这些样式。
JavaScript：
- 使用 document.getElementById() 获取对可编辑表格的引用。
- 使用 forEach 循环遍历表格中的所有行和单元格。
- 为每个可编辑单元格添加 input 事件侦听器。
- 在事件处理程序中，您可以获取单元格的新值并执行所需的操作，例如更新数据或触发其他操作。