Highlighting column in table OnClick

Question

I was wondering if it could be possible to make a script, that on column click, highlighted the column, instead of just highlighting it on hover.

Right now i have made this CSS

* {
    box-sizing:border-box;
  }
  
  table {
    overflow: hidden;
  }
  
  td, th {
      position: relative;
  }
  td:hover::before { 
      background-color: #eee;
      content: '';  
      height: 100%;
      left: -5000px;
      position: absolute;  
      top: 0;
      width: 10000px;   
      z-index: -2;        
  }
  td:hover::after { 
      background-color: rgb(255, 218, 170);
      content: '';  
      height: 10000px;    
      left: 0;
      position: absolute;  
      top: -5000px;
      width: 100%;
      z-index: -1;        
  }

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Could it be possible to make a script that did this, just to columns:

function highlight_row() {
  var table = document.getElementById("testresultsTable");
  var cells = table.getElementsByTagName("td");
  for (var i = 0; i < cells.length; i++) {
    // Take each cell
    var cell = cells[i];
    // do something on onclick event for cell
    cell.onclick = function() {
      // Get the row id where the cell exists
      
      var rowId = this.parentNode.rowIndex;
      var rowsNotSelected = table.getElementsByTagName("tr");
      for (var row = 0; row < rowsNotSelected.length; row++) {
        if(row !== rowId) {
        }
      }
      var rowSelected = table.getElementsByTagName("tr")[rowId];
      if (rowSelected.classList.contains("selected")) {
          rowSelected.style.backgroundColor = "";
          rowSelected.classList.remove("selected");
      } else {
        rowSelected.style.backgroundColor = "yellow";
        rowSelected.classList.add("selected");
      }      
    }
  }
} //end of function
window.onload = highlight_row;

<table id = 'testresultsTable' style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

So the question is: How can I make somthing like the row select script, just for columns. So when I click on Firstname, Lastname or Age, the column is selected, and can also be unselected if I click again.

Answer 1

Get the index of clicked td and then select all th and td with that index and apply css.

function highlight_row() {
  var table = document.getElementById("testresultsTable");
  var cells = table.getElementsByTagName("td");
  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    cell.onclick = function() {
      const parentTds = this.parentElement.children;
      const clickedTdIndex = [...parentTds].findIndex(td => td == this);
      const columns = document.querySelectorAll(`td:nth-child(${clickedTdIndex+1}), th:nth-child(${clickedTdIndex+1})`);
      document.querySelectorAll('.selected').forEach(col => col.classList.remove('selected'));
      columns.forEach(col => {
        col.classList.add('selected');
      });
    }
  }
}

window.onload = highlight_row;

.selected {
  background-color: red;
}

<table style="width:100%" id="testresultsTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

-- Edit --

function highlight_row() {
  var table = document.getElementById("testresultsTable");
  var tdsth = table.querySelectorAll("th, td");

  for (var i = 0; i < tdsth.length; i++) {
    var cell = tdsth[i];
    cell.onclick = function() {
      const children = this.parentElement.children;
      const clickedThIndex = [...children].findIndex(th => th == this);
      const columns = document.querySelectorAll(`td:nth-child(${clickedThIndex + 1}), th:nth-child(${clickedThIndex + 1})`);
      columns.forEach(col => {
        if (col.classList.contains('selected'))
          col.classList.remove('selected');
        else
          col.classList.add('selected');
      });
    }
  }
}

window.onload = highlight_row;

.selected {
  background-color: red;
}

td,
th {
  cursor: pointer;
}

<table style="width:100%" id="testresultsTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>