JSFiddle - React, Tailwind, and code Playground

by tracyfu

HTML

<table id="sheet">
  <tr>
    <th>TH 1</th>
    <th>TH 2</th>
    <th>TH 3</th>
  </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
$('#sheet td').hover(function() {
  $('#sheet th').eq($(this).index()).addClass('active');
},
function() {
  $('#sheet th').eq($(this).index()).removeClass('active');
});

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