使用JavaScript从表格中删除列

Question

我需要使用html从javascript表中自动消除一列。该表格是使用框架从csv文件自动创建的，因此我无法对其进行修改（例如，添加id等）。我设法通过添加指向列标题的链接来消除该列，然后单击以消除该列，但是我找不到一种在页面加载时自动执行此操作的方法。我是javascript的新手，所以请尝试为假人解释它。

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

function delColumn(link) {
  var idx = 2,
      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 th = document.querySelectorAll("th");
  th[2].innerHTML += ' <a href="#" onclick="return delColumn(this)">X</a>';
}

<div class="table">
  <table class="inline">
    <tr class="row0">
      <th class="col0">FullName</th>
      <th class="col1">Country</th>
      <th class="col2">Position</th>
      <th class="col3">CellPhone</th>
      <th class="col4">Email</th>
    </tr>
    <tr class="row1">
      <td class="col0">magnus</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">22</td>
      <td class="col4">magnus.gaylord@example.com</td>
    </tr>
    <tr class="row2">
      <td class="col0">Phoebe Feest</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">23</td>
      <td class="col4">ylittel@example.net</td>
    </tr>
    <tr class="row3">
      <td class="col0">Prof. Tad Johnston</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">24</td>
      <td class="col4">srau@example.org</td>
    </tr>
    <tr class="row4">
      <td class="col0">Annabelle Ortiz</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">25</td>
      <td class="col4">damore.walker@example.org</td>
    </tr>
    <tr class="row5">
      <td class="col0">Mrs. Adella Schiller IV</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">26</td>
      <td class="col4">jadyn.dibbert@example.com</td>
    </tr>
  </table>
</div>

上面的代码有效，但是我必须在位置列上按x才能消除它，我需要它自动发生。换句话说，我不想使用代码href="#" onclick="return delColumn(this)"，而是让它在加载时发生。

Answer 1

由于您的所有列都具有特定的class，因此可能使用ES6的一种解决方案是使用：

document.querySelectorAll(".col2").forEach(col => col.remove());

或采用标准方法：

var cols = document.querySelectorAll(".col2");

for (var i = 0; i < cols.length; i++)
{
    cols[i].remove();
}

示例：

window.onload = function()
{
    var cols = document.querySelectorAll(".col2");

    for (var i = 0; i < cols.length; i++)
    {
        cols[i].remove();
    }

    // Or with ES6:
    //document.querySelectorAll(".col2").forEach(col => col.remove());
}

<div class="table">
  <table class="inline">
    <tr class="row0">
      <th class="col0">FullName</th>
      <th class="col1">Country</th>
      <th class="col2">Position</th>
      <th class="col3">CellPhone</th>
      <th class="col4">Email</th>
    </tr>
    <tr class="row1">
      <td class="col0">magnus</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">22</td>
      <td class="col4">magnus.gaylord@example.com</td>
    </tr>
    <tr class="row2">
      <td class="col0">Phoebe Feest</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">23</td>
      <td class="col4">ylittel@example.net</td>
    </tr>
    <tr class="row3">
      <td class="col0">Prof. Tad Johnston</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">24</td>
      <td class="col4">srau@example.org</td>
    </tr>
    <tr class="row4">
      <td class="col0">Annabelle Ortiz</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">25</td>
      <td class="col4">damore.walker@example.org</td>
    </tr>
    <tr class="row5">
      <td class="col0">Mrs. Adella Schiller IV</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">26</td>
      <td class="col4">jadyn.dibbert@example.com</td>
    </tr>
  </table>
</div>

Answer 2

Shidersz的答案很好，但也值得注意的是，您可以使用单个CSS规则而不是JavaScript来完成此操作：

.col2 {
  display: none;
}

<div class="table">
  <table class="inline">
    <tr class="row0">
      <th class="col0">FullName</th>
      <th class="col1">Country</th>
      <th class="col2">Position</th>
      <th class="col3">CellPhone</th>
      <th class="col4">Email</th>
    </tr>
    <tr class="row1">
      <td class="col0">magnus</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">22</td>
      <td class="col4">magnus.gaylord@example.com</td>
    </tr>
    <tr class="row2">
      <td class="col0">Phoebe Feest</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">23</td>
      <td class="col4">ylittel@example.net</td>
    </tr>
    <tr class="row3">
      <td class="col0">Prof. Tad Johnston</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">24</td>
      <td class="col4">srau@example.org</td>
    </tr>
    <tr class="row4">
      <td class="col0">Annabelle Ortiz</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">25</td>
      <td class="col4">damore.walker@example.org</td>
    </tr>
    <tr class="row5">
      <td class="col0">Mrs. Adella Schiller IV</td>
      <td class="col1">Guatemala</td>
      <td class="col2">Lacayo</td>
      <td class="col3">26</td>
      <td class="col4">jadyn.dibbert@example.com</td>
    </tr>
  </table>
</div>