Select HTML table columns by clicking on the headers

by Génesis García Morilla

HTML

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>surname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Erwin</td>
      <td>Schrödinger</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Louis</td>
      <td>de Broglie</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Max</td>
      <td>Planck</td>
    </tr>
  </tbody>
</table>

CSS

* {
  color: #2b2b2b;
  font-family: "Roboto Condensed";
}

.selected {
  background-color: #f36e65;
}

th {
  text-align: left;
  color: #4679bd;
  cursor: pointer;
}

th,
td {
  padding: 10px 20px;
}

tbody > tr:nth-of-type(even) {
  background-color: #daeaff;
}

JavaScript

document.querySelectorAll('th')
  .forEach($th => $th.onclick = event => {
    document
      .querySelectorAll(`td:nth-of-type(${event.currentTarget.cellIndex + 1})`)
      .forEach($td => $td.classList.toggle('selected'))
  })