Eliminate column from table using javascript

Question

I need to automatically eliminate a column from a html table using javascript. The table is created automatically from a csv file using a framework so I can't modify it (ex. add an id, etc.). I managed to eliminate the column by adding a link to the column header, and on click it eliminates the column, but I can't find a way to do it automatically when the page loads. I'm new to javascript so please try to explain it for dummies.

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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</td>
    </tr>
  </table>
</div>

The above code works but I have to press the x on the position column for it to be eliminated and I need it to happen automatically. In other words I don't want to use the code href="#" onclick="return delColumn(this)" but have it happen on load.

Have you tried calling delColumn directly from the load event? E.g. delColumn(document.querySelectorAll("th")[2])? — RobG
– RobG, Commented Jun 13, 2019 at 20:21
Since all your columns have a particular class, maybe you can use document.querySelectorAll(".col2").forEach(node => node.remove()); — Shidersz
– Shidersz, Commented Jun 13, 2019 at 20:28
@Shidersz wow I was triyng to solve this the whole day and you managed to do it in like a minute and one line!!!! thanks a lot!!! — Matt
– Matt, Commented Jun 13, 2019 at 20:34

Shidersz · Accepted Answer · 2019-06-13 20:40:34Z

Since all your columns have a particular class, maybe one possible solution using ES6 is to use:

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

Or with a standard approach:

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

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

Example:

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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</td>
    </tr>
  </table>
</div>

Jordan Running · Accepted Answer · 2019-06-14 16:08:41Z

1

Shidersz's answer is fine, but it's also worth noting that you could do with with a single CSS rule instead of 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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</td>
    </tr>
  </table>
</div>

answered Jun 14, 2019 at 16:08

Jordan Running

107k18 gold badges193 silver badges189 bronze badges

3 Comments

random_user_name Over a year ago

As the question specifically requests javascript, seems like this might be better as a comment rather than an answer....

Shidersz Over a year ago

This is a good alternative too, the only note about this is that the DOM elements will still exists in the table, but if the goal is just to not visually show the data, it is nice. +1

Matt Over a year ago

@Jordan Running Thanks I would have used this but I couldn't have the elements in the DOM as Shidersz mentioned. Regardless it is a really good answer. +1

Collectives™ on Stack Overflow

Eliminate column from table using javascript

2 Answers 2

Example:

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example:

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related