Table Row Comparison Highlighter

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div style="display:inline-block">
    <div>
<table id="Table1" class="table table-hover" style="float:left">
    <tbody>
       <tr>
           <td>Col 1</td>
           <td>Col 2 </td>
       </tr>
        <tr>
           <td>Col 1</td>
           <td>Col 2 </td>
       </tr>
    </tbody>
</table>
    </div>
<div>
<table id="Table2" class="table table-hover">
    <tbody>
       <tr>
           <td>Col 1</td>
           <td>Col 2 </td>
       </tr>
        <tr>
           <td>Col 1</td>
           <td>Col 2 </td>
       </tr>
    </tbody>
</table>
</div>
</div>

CSS

a {
    border: 1px solid #f00;
    display: inline-block;
}.progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:5px;
    float:left
}
.progress {
   background-color:#ff0000;
   height:5px;
   display:inline-block;
}
.hov{background-color:red!important}

JavaScript

$('#Table1 tbody tr td').mouseover(function(){
    var ro=$(this).closest('tr').index()
    var col=$(this).index()
    $(this).addClass('hov').siblings().removeClass('hov')
    $('#Table2 tr:eq('+ro+')').find('td:eq('+col+')').addClass('hov').siblings().removeClass('hov')
});
$('#Table1 tbody tr td').mouseleave(function(){
    var ro=$(this).closest('tr').index()
    var col=$(this).index()
    $(this).removeClass('hov')
    $('#Table2 tr:eq('+ro+')').find('td:eq('+col+')').removeClass('hov')
});