jquery to highlight the selected row and column in a table

Question

I want to highlight the complete row and column of the selected cell in a html table using jquery. I came across many examples using CSS but could not find using jquery. Please suggest. Please find the fiddle : http://jsfiddle.net/0w9yo8x6/70/

Below is the html code:

<div>
<table>
<tr>
<td>
    <table border="1px">
     <tr>
               <td></td>
                    <td  bgcolor="grey">
                   <br>Column1
                    </td>


                   <td  bgcolor="grey">
                   <br>Column2
                    </td>


                   <td  bgcolor="grey">
                   <br>Column3
                    </td>


                   <td  bgcolor="grey">
                   <br>Column4
                    </td>


                   <td  bgcolor="grey">
                   <br>Column5
                    </td>
        </tr>  
   <tr>
   <td bgcolor="grey" >Row1</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data1    </td>
     </tr>
     </table> 
</td> 

   <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data2    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data3    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data4    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data5    </td>
     </tr>
     </table> 
</td> 

</tr>
   <tr>
   <td  bgcolor="grey">Row2</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data1    </td>
     </tr>
     </table> 
</td> 

   <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data2    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data3    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data4    </td>
     </tr>
     </table> 
</td> 

  <td >
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data5    </td>
     </tr>
     </table> 
</td> 

</tr>


   <tr>
   <td  bgcolor="grey">Row3</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data1    </td>
     </tr>
     </table> 
</td> 

   <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data2    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data3    </td>
     </tr>
     </table> 
</td> 

  <td >
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data4    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data5    </td>
     </tr>
     </table> 
</td> 

</tr>
</table></td></tr></table></div>

--EDIT-- I cannot simplify/modify my table structure as it is generating dynamically and retrieving the values from database and display's in cells. With my existing structure as i shown in the question / fiddle http://jsfiddle.net/0w9yo8x6/70/ i need to achieve the row and column highlight. Thanks.

Answer 1

CSS-Tricks covered a small tutorial on how to do this with JS/jQuery here:

http://css-tricks.com/row-and-column-highlighting/

The best way is shown here:

 $("table").delegate('td','mouseover mouseleave', function(e) { if (e.type == 'mouseover') { $(this).parent().addClass("hover"); $("colgroup").eq($(this).index()).addClass("hover"); } else { $(this).parent().removeClass("hover"); $("colgroup").eq($(this).index()).removeClass("hover"); } }); 

 #page-wrap { width: 600px; margin: 0 auto; } table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ccc; padding: 10px; } .slim { width: 88px; } .hover { background-color: #eee; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table border="1" width="100%"> <colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup> <thead> <tr> <th>test</th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

Answer 2

You can simplify your table like this:

<table>
  <tr><td>    <td>Column1<td>Column2<td>Column3<td>Column4<td>Column5
  <tr><td>Row1<td>Data1  <td>Data2  <td>Data3  <td>Data4  <td>Data5
  <tr><td>Row2<td>Data1  <td>Data2  <td>Data3  <td>Data4  <td>Data5
  <tr><td>Row3<td>Data1  <td>Data2  <td>Data3  <td>Data4  <td>Data5
</table>

Many people close tr s and td s, but I choose not to, because those are optional closing tags in HTML5, and in my experience, they were never needed in HTML4. (Google's Style Guide also recommends omitting optional tags .)

All presentation styles should be done in a CSS style sheet, like this:

table {
  border-spacing: 0px;
}

td {
  border: 1px solid #bbb;
  padding: 0.2em;
}

tr:first-child, td:first-child {
  background: lightgrey;
}

.hovered {
  background: yellow;
}

With jQuery, you can add a hover event to the table's td s, which toggle the hovered class for the td 's parent row and all the td s in its column:

$('td').hover(function() {
  $(this).parent('tr').toggleClass('hovered');
  $('td:eq('+this.cellIndex+')','tr').toggleClass('hovered');
});

Fiddle

---

Edit

Since you can't change your layout, the highlighting functionality is a bit more difficult. In this case, you can use jQuery to change your multi-table layout to a single table:

 $('table:first-child').replaceWith($('table', 'table:first-child').html()); $('table').each(function() { var td= $('td', this); if(td.length === 1) { $(this).replaceWith(td.html()); } }); 

This allows the highlighting code to work on your existing HTML.

New Fiddle