使用javascript删除html表中的用户选定列（无jQuery）

Question

我已经实现了以下代码来删除html表中的列。我希望能够在用户选择某个列时实现此功能，而不是始终只删除最后一列 - 有人可以帮忙吗？

function deleteColumn(){

  var lastColumn = document.getElementById('Overall Result');
  var table = document.getElementById('tg-LTO9U');
  var rowCount = table.rows.length;
  for(var i=0;i<rowCount;i++){
     table.rows[i].deleteCell(table.rows[i].cells.length-2);
  }
}

删除列

Answer 1

我添加了一个指向表头的链接，以显示如何将索引传递给函数

function closestByTagName(el, tagName) {
  while (el.tagName != tagName) {
    el = el.parentNode;
    if (!el) {
      return null;
    }
  }
  return el;
}

function delColumn(link) {
  var idx = link.getAttribute("data-idx"),
    table = closestByTagName(link, "TABLE"),
    rowCount = table.rows.length;
  for (var i = 0; i < rowCount; i++) {
    table.rows[i].deleteCell(idx);
  }
  return false;
}
window.onload = function() {
  var ths = document.querySelectorAll("th");
  for (var i = 0; i < ths.length; i++) {
    ths[i].innerHTML += ' <sup><a href="#" data-idx="' + i + '" class="del" onclick="return delColumn(this)">X</a></sup>';
  }
}

sup { font-size:xx-small }
.del { text-decoration:none }

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>