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

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《如何通过点击表头删除对应列数据？》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

点击表头删除相应列

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

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

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

以下是一个演示代码段：

<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>

今天关于《如何通过点击表头删除对应列数据？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！