JSFiddle - React, Tailwind, and code Playground

HTML

<table id="sheet">
  <tr>
    <th>TH 1</th>
    <th>TH 2</th>
    <th>TH 3</th>
  </tr>
  <tr>
    <td>TD 1</td>
      <td><input type="text"></input></td>
      <td><input type="text"></input></td>
  </tr>
    <tr>
    <td>TD 1</td>
    <td>TD 2</td>
    <td>TD 3</td>
  </tr>
    <tr>
    <td>TD 1</td>
    <td>TD 2</td>
    <td>TD 3</td>
  </tr>
</table>

<span id="display-col"></span>

CSS

table, #display-col {
  margin: 20px;
}

th, td {
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 10px;
}

.active {
  background: #fcc;
}

JavaScript

// Highlight the TH
$('td').hover(function() {
  $('th').eq($(this).index()).addClass('active');
  $(this).parent().children(':first-child').addClass('active');
},
function() {
  $('th').eq($(this).index()).removeClass('active');
  $('td').parent().children(':first-child').removeClass('active');
});

// focus the TH

$('input').focus(function() {
    $padre = $(this).parent('td');
    
    $('th').eq($($padre).index()).addClass('active');
    $(this).addClass('active');
    $padre.parent('tr').children(':first-child').addClass('active');

});

$('input').focusout(function() {
  $('input').removeClass('active');
  $('th').removeClass('active');
  $('td').parent().children(':first-child').removeClass('active');
});



// Get the current column
$('td').hover(function() {
  $('#display-col').text('Current Column: ' + $(this).index());
},
function() {
  $('#display-col').text('');
});