使用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">[e-mail]</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">[e-mail]</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">[e-mail]</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">[e-mail]</td>上面的代码有效，但我必须按下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">[e-mail]</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">[e-mail]</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">[e-mail]</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">[e-mail]</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">[e-mail]</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">[e-mail]</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">[e-mail]</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">[e-mail]</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">[e-mail]</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">[e-mail]</td>

    </tr>

  </table>

</div>