JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<table>
  <tr class="ligne"><td>coucou</td></tr>
  <tr class="ligne"><td>coucou</td></tr>
  <tr class="ligne"><td>coucou</td></tr>
  <tr class="ligne"><td>coucou</td></tr>
  <tr class="ligne"><td>coucou</td></tr>
  <tr class="ligne"><td>coucou</td></tr>
  <tr class="ligne"><td>coucou</td></tr>
</table>

CSS

.highlight {
  background: red;
}

JavaScript

let ligneAll = document.getElementsByClassName('ligne');

for (let ligne of ligneAll) {
  ligne.addEventListener("click", changeclr);
}

function changeclr(){
  let ligneHihlighted = document.getElementsByClassName('highlight')[0];
  if (ligneHihlighted) {
  	ligneHihlighted.classList.remove("highlight");
  }
  this.classList.add("highlight");
}