html5可编辑表格拿到表格数据

HTML5可编辑表格：获取表格数据

HTML5带来了许多新的功能和API，其中包括可编辑的表格。在过去，要实现表格的编辑，我们通常需要使用JavaScript来处理用户的输入并更新表格数据。但是，HTML5的可编辑表格使得获取和更新表格数据变得更加简单和直观。

在本文中，我们将介绍如何使用HTML5可编辑表格，并演示如何使用JavaScript来获取和处理表格数据。

HTML5可编辑表格基础

HTML5的可编辑表格通过设置contenteditable属性来实现。将contenteditable属性设置为"true"时，元素将变为可编辑状态。

以下是一个简单的示例，演示了如何创建一个可编辑的表格：

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td contenteditable="true">John</td>
    <td contenteditable="true">[e-mail]</td>
  </tr>
  <tr>
    <td contenteditable="true">Jane</td>
    <td contenteditable="true">[e-mail]</td>
  </tr>
</table>

在上面的示例中，我们使用contenteditable属性将表格中的单元格设置为可编辑状态。用户可以直接在单元格中输入或编辑文本。

使用JavaScript获取表格数据

要获取可编辑表格中的数据，我们可以使用JavaScript来处理表格的input或change事件。

以下是一个示例，演示了如何使用JavaScript来获取可编辑表格中的数据：

// 获取表格
var table = document.querySelector("table");

// 添加事件监听器
table.addEventListener("input", function(event) {
  var target = event.target;
  
  // 检查目标元素是否为表格单元格
  if (target.tagName === "TD") {
    var row = target.parentNode;
    var rowData = [];

    // 遍历行中的每个单元格
    for (var i = 0; i < row.cells.length; i++) {
      rowData.push(row.cells[i].textContent);
    }

    console.log(rowData);
  }
});

在上面的示例中，我们使用addEventListener方法来为表格添加input事件监听器。当用户在表格中的单元格中输入或编辑文本时，事件监听器将被触发。

在事件监听器中，我们使用event.target来获取触发事件的元素。如果目标元素的标签名为"TD"，则表示用户正在编辑表格中的单元格。

我们遍历行中的每个单元格，并将其文本内容添加到一个数组中。最后，我们通过console.log将数组打印到控制台。

应用示例

下面是一个更复杂的示例，演示了如何使用HTML5可编辑表格和JavaScript来创建一个任务管理器：

<div id="taskManager">
  <h2>任务管理器</h2>
  
  <table>
    <thead>
      <tr>
        <th>任务</th>
        <th>优先级</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td contenteditable="true">购买日用品</td>
        <td contenteditable="true">高</td>
        <td><button class="deleteButton">删除</button></td>
      </tr>
      <tr>
        <td contenteditable="true">写报告</td>
        <td contenteditable="true">中</td>
        <td><button class="deleteButton">删除</button></td>
      </tr>
      <tr>
        <td contenteditable="true">锻炼</td>
        <td contenteditable="true">低</td>
        <td><button class="deleteButton">删除</button></td>
      </tr>
    </tbody>
  </table>
  
  <button id="addButton">添加任务</button>
</div>

<script>
  var taskManager = document.getElementById("taskManager");
  
  // 添加任务
  document.getElementById("addButton").addEventListener("click", function() {
    var table = taskManager.querySelector("table");
    var newRow = document.createElement("tr");
    
    newRow.innerHTML = `
      <td contenteditable="true">新任务</td>
      <td contenteditable="true">低</td>
      <td><button class="deleteButton">删除</button></td>
    `;
    
    table.querySelector("tbody").appendChild(newRow);
  });