如何通过点击表头删除对应列数据？

点击表头删除相应列

有网友提出一个难题：如何在点击表头时删除其所属列？他苦思冥想，却毫无思路。

一位编程高手给出以下解决方案：

如果仅需在本地显示，可以在表头中添加单击事件处理程序。在事件处理程序中，获取当前列的索引并删除表格中对应的列即可。

以下是一个演示代码段：

<table>
  <thead>
    <tr>
      <th onclick="deleteColumn(this)">Name</th>
      <th onclick="deleteColumn(this)">Age</th>
      <th onclick="deleteColumn(this)">Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>25</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

<script>
  function deleteColumn(element) {
    // 获取当前列的索引
    var index = element.cellIndex;

    // 删除表格中对应的列
    element.parentNode.parentNode.deleteCell(index);
  }
</script>

登录后复制

以上就是如何通过点击表头删除对应列数据？的详细内容，更多请关注米云其它相关文章！