JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

CSS

table, td {border: 1px solid black;border-collapse: collapse;border-spacing: 0;margin: 30px auto;}
td {width: 40px;height: 40px;text-align: center;}
.highlighted {background-color: #348A75;}

JavaScript

$('td').hover(function() {
  var t = parseInt($(this).index()) + 1;
  if (t>1 && t<7) {
    $('td:nth-child(' + t + ')').addClass('highlighted');
  }
},
function() {
  var t = parseInt($(this).index()) + 1;
  $('td:nth-child(' + t + ')').removeClass('highlighted');
});