JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table border="0" cellspacing="0" cellpadding="8" class="document-table">
  <tbody>
    <tr>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
    </tr>
    <tr>
      <td data-col-index="0" data-row-index="0">item</td>
      <td data-col-index="1" data-row-index="0">item</td>
      <td data-col-index="2" data-row-index="0">item</td>
      <td data-col-index="3" data-row-index="0">item</td>
      <td data-col-index="4" data-row-index="0">item</td>
    </tr>
    <tr>
      <td data-col-index="0" data-row-index="1">item</td>
      <td data-col-index="1" data-row-index="1">item</td>
      <td data-col-index="2" data-row-index="1">item</td>
      <td data-col-index="3" data-row-index="1">item</td>
      <td data-col-index="4" data-row-index="1">item</td>
    </tr>
    <tr>
      <td data-col-index="0" data-row-index="2">item</td>
      <td data-col-index="1" data-row-index="2">item</td>
      <td data-col-index="2" data-row-index="2">item</td>
      <td data-col-index="3" data-row-index="2">item</td>
      <td data-col-index="4" data-row-index="2">item</td>
    </tr>
    <tr>
      <td data-col-index="0" data-row-index="3">item</td>
      <td data-col-index="1" data-row-index="3">item</td>
      <td data-col-index="2" data-row-index="3">item</td>
      <td data-col-index="3" data-row-index="3">item</td>
      <td data-col-index="4" data-row-index="3">item</td>
    </tr>
  </tbody>
</table>

CSS

table.document-table{
  
}

table.document-table td.hover{
  background-color: blue;
}

JavaScript

$('table.document-table>tbody>tr>td').mouseover(function(){

	var col = parseInt($(this).attr('data-col-index'));
  var row = parseInt($(this).attr('data-row-index'));
  
  var t = $(this);
  
  $('table.document-table>tbody>tr>td').each(function(){
  
  	$(this).removeClass('hover');
    
    var col2 = parseInt($(this).attr('data-col-index'));
  	var row2 = parseInt($(this).attr('data-row-index'));
    
    if((row == row2) && (col2 <= col)){
    
    	$(this).addClass('hover');
    
    } else if((col == col2) && (row2 <= row)){
    
    	$(this).addClass('hover');
    
    }
  
  });

});

$('table.document-table>tbody>tr>td').mouseout(function(){

	$('table.document-table>tbody>tr>td').each(function(){
  
  		$(this).removeClass('hover');
    
    });

});