Подсветка столбца в таблице OnClick

Question

Мне было интересно, можно ли сделать сценарий, который on column click, выделил бы столбец, а не просто выделил его на hover.

Сейчас я сделал это 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>

Можно ли сделать script, который сделал это, только для столбцов:

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>

Итак, вопрос: Как сделать что-то похожее на скрипт выбора строки, только для столбцов. Поэтому, когда я нажимаю Firstname, Lastname or Age, столбец выбирается, и его можно также отменить, если я нажму еще раз.

Answer 1

Получить индекс нажатых td, а затем выбрать все th и td с этим индексом и применить 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>

- Правка -

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>