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 事件侦听器。
- 在事件处理程序中，您可以获取单元格的新值并执行所需的操作，例如更新数据或触发其他操作。