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 width="100%" border="0" cellspacing="0" cellpadding="5">
  <tbody class="headers">
    <tr>
      <th scope="col">Version</th>
      <th scope="col">Equipment Name</th>
      <th colspan="2" scope="col">Step 1</th>
      <th colspan="2" scope="col">Step 2</th>
    </tr>
  </tbody>
  <tbody class="content">
    <tr>
      <td>1</td>
      <td>02 - HTX - 01-to another</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis dolor, consectetur a augue a, gravida malesuada tortor. Nunc cursus sagittis odio. Suspendisse sed velit pellentesque, rhoncus quam nec, mollis est.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis dolor, consectetur a augue a, gravida malesuada tortor. Nunc cursus sagittis odio. Suspendisse sed velit pellentesque, rhoncus quam nec, mollis est.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis dolor, consectetur a augue a, gravida malesuada tortor. Nunc cursus sagittis odio. Suspendisse sed velit pellentesque, rhoncus quam nec, mollis est.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis dolor, consectetur a augue a, gravida malesuada tortor. Nunc cursus sagittis odio. Suspendisse sed velit pellentesque, rhoncus quam nec, mollis est.</td>
    </tr>
    <tr>
      <td>2</td>
      <td>02 - HTX - 01-to another</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis dolor, consectetur a augue a, gravida malesuada tortor. Nunc cursus sagittis odio. Suspendisse sed velit pellentesque, rhoncus quam nec, mollis est. An additional item 1.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis dolor, consectetur a augue a, gravida malesuada tortor. Nunc cursus sagittis odio. Suspendisse sed velit pellentesque, rhoncus quam nec, mollis est.</td>
     ...

CSS

table{
  font-family: arial;
  font-size: 12px;
}

table th{
    background-color: #356db0;
    color: #fff;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 10px;
    min-width: 80px;
    border-right: solid 1px #fff;
}
table td{
  vertical-align: top;
  border: solid 1px #ccc;
}

table td.highligted-cell{
  background-color: #ffff8e;
}

JavaScript

function highlightChanges(table){

	let first = true;

	table.find('tbody.content>tr').each(function(rowindex){
  
  	// a row
    
    if(!first){
    
    	let cached_this = $(this);
    
    	cached_this.find('td').each(function(cellindex){
      
      	let currentCell = $(this);
    
    		// compare with cell above
        
        let cellAbove = table.find('tbody.content>tr').eq(rowindex-1).find('td').eq(cellindex);
        
        if(cellAbove.length){
        
          if(cellAbove.html() != currentCell.html()){
          
          	console.log("FOUND A CELL ABOVE");
            
            currentCell.addClass('highligted-cell');
          
          }
        
        }
        
    
    	});
    
    }
    
    first = false;
  
  });

}

highlightChanges($('table'));