Vanilla JS: Table Styles and Hide Column

Vanilla JS: Table Styles and Hide Column

HTML

<!-- Helpful styling article: http://css-tricks.com/complete-guide-table-element -->
<input id="btn" type="button" value="click" />
<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
      <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td>once</td>
      <td>more</td>
      <td>with</td>
      <td>feeling</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
  padding: 0.5em;
  text-align: center;
}

JavaScript

var table = document.querySelector('table'),
  tr = table.querySelectorAll('tr'); //array of tr's.

//Loop through each item in the 'tr' array to get each Row.  
for (var i = 0, rowList = tr.length; i < rowList; i++) {
  var row = tr[i]; //each tr element.
  console.log(tr[i]);
  var td = row.querySelectorAll('td'); //array of td's in each tr element.
  console.log(td);

  //loop through each item in the 'td' array to get each Cell within each Row.
  for (var x = 0, cellList = td.length; x < cellList; x++) {
    var cell = td[x]; //each td element in each tr element.
    if (x === 2) {
      console.log(cell.innerText);
      cell.style.color = 'red';
    };
  };
};


var fn = function(col) {
  for (var i = 0, rowList = tr.length; i < rowList; i++) {
    var row = tr[i]; //each tr element.
    var td = row.querySelectorAll('td'); //array of td's in each tr element.
    for (var x = 0, cellList = td.length; x < cellList; x++) {
      var cell = td[x]; //each td element in each tr element.
      if (x === col) {
        if (cell.style.display == 'none') {
          cell.style.diaplay = 'table-cell';
        } else {
          cell.style.display = 'none';
        }
        //cell.style.color = 'red';  
      } else {
        cell.style.diaplay = 'table-cell';
      }
    };
  };

}
var btn = document.getElementById("btn");
btn.addEventListener('click', function() {
  console.log('click')
  fn(2);
  return false;
}, false);