JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<table id="T1" border='1'>
<thead>
<tr>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Suffix</th>
</tr>
</thead>
<tbody>
<tr>
  <td>12</td>
  <td>34</td>
  <td>56</td>
  <td>78</td>
</tr>
</tbody>
</table>

<table id="T2" border='1'>
<thead>
<tr>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Suffix</th>
</tr>
</thead>
<tbody>
<tr>
  <td>12</td>
  <td>34</td>
  <td>56</td>
  <td>23</td>
</tr>
<tr>
  <td>bat</td>
  <td>man</td>
  <td>11</td>
  <td>21212</td>
</tr>
<tr>
  <td>james</td>
  <td>bond</td>
  <td>007</td>
  <td>dadadada</td>
</tr>
<tr>
  <td>12</td>
  <td>34</td>
  <td>22</td>
  <td>78</td>
</tr>
</tbody>
</table>

<br /><br /><br /><br />

<button id="btn">color if matches</button>

CSS

table{;margin:5px;}

JavaScript

$(function(){
    $('#btn').on('click', function(e){
        $('#T1 tbody tr').each(function(){
        var row = $(this);
        var left_cols = $(this).find("td:lt(3)");
        $('#T2 tbody tr').each(function(){
            var right_cols = $(this).find("td:lt(3)");
            if(left_cols.html() == right_cols.html()) {
                left_cols.css('background-color', 'green').css('color', 'red');
                right_cols.css('background-color', 'green').css('color', 'red');
             }
         });
      });
   });
});