JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<table>
  <tbody class="selectable">
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 3, Cell 1</td>
      <td>Row 3, Cell 2</td>
    </tr>
    <tr>
      <td>Row 4, Cell 1</td>
      <td>Row 4, Cell 2</td>
    </tr>
  </tbody>
  <!-- More tbody groups as needed -->
</table>

CSS

.selectable {
  cursor: pointer; /* Indicates that the element is interactive */
}

.selected {
  outline: 2px solid blue; /* Customize the outline as needed */
}

JavaScript

document.querySelectorAll('.selectable').forEach(function(tbody) {
  tbody.addEventListener('click', function() {
    tbody.classList.toggle('selected');
  });
});