Highlighting a Table Rows with jQuery and CSS

What?

During a recent project of mine I needed to apply a highlight to an HTML table row when the user clicked on a row header cell.  I found a few good examples online, and I took them to heart.  However while coding the little snippet I realized that I could use simple CSS selectors instead of jQuery selectors with inline CSS.

How?

The solution combines some very simple jQuery, and a few equally simple CSS classes.  The concept is that you would call the highlightRow function wherever you feel it best for your situation.  In my case it was called when the user clicked on the first cell in the row that acted like a row header.

 <script type="text/javascript">  
   // Binding the highlightRow function to click
   // event of the header cell of the row.  
   $( cell ).click( function () {  
     highlightRow( $( this ).closest( 'tr' ) );  
   } );  
 </script>  

This part is up to you if you want to create a separate function or just add this code in-line to your delegate function above.  I chose to create a separate function so that I could reuse the code in multiple locations.

 function highlightRow( row ) {   
   $( row ).addClass( 'grid-row-highlight' );   
 }  
 function unhighlightRow( row ) {  
   $( row ).removeClass( 'grid-row-highlight' );  
 }  

If in your project you are looking for a way to simply highlight a row when the user mouse hovers over it then you could set the row's hover function as shown below.

 $( '#tblTest > tbody > tr' ).hover(  
    function() { highlightRow( $( this ) ); },  
    function() { unhighlightRow( $( this ) ); }  
 );  

The final part to this simple solution is to create three CSS classes.  This is where my solution differed from others out there.  I decided to use the CSS3 pseudo-class selectors inline with the CSS classes to apply the styles exactly where I needed them.

Primary CSS Class

The primary CSS class should be applied to all table cell elements, and will apply a box border around the entire cell, but the key here is there are no colors specified here.  That is handled later by subsequent classes.

 .grid-row-highlight td {  
  box-sizing: border-box !important;  
  color: #000000;  
  -moz-box-sizing: border-box !important;  
  -webkit-box-sizing: border-box !important;  
 }

Apply Class to First Cell

Setting the first cell in the row as a header cell, of course, is optional.  I was going for the MS Excel look by providing the user with a clickable cell.  Using the pseudo classes we can override the primary CSS class and instruct the browser to NOT apply the highlight to first cell, and apply separate instructions for the second cell in the row.  Which in this case is the first cell containing data.

 /*   
 Because I had a row header cell this selector will let the highlight  
 skip it.  
 */  
 .grid-row-highlight td:not(:first-child) {  
  background-color: rgb(191, 226, 250) !important;  
  border-top: solid 3px rgb(42, 141, 212) !important;  
  border-bottom: solid 3px rgb(42, 141, 212) !important;  
 }  
 /*   
 This selector will apply formatting to the second cell in the row  
 which is essentially the first cell in my grid.  
 */  
 .grc-grid-row-highlight td:nth-child(2) {  
  background-color: rgb(191, 226, 250) !important;  
  border-top: solid 3px rgb(42, 141, 212) !important;  
  border-bottom: solid 3px rgb(42, 141, 212) !important;  
  border-left: solid 3px rgb(42, 141, 212) !important;  
 }

Apply Class to Last Cell

Finally we apply instructions to the last cell to close off the highlighting and border.

 /*  
 This selector will apply formatting to the last cell in the row.  
 */  
 .grc-grid-row-highlight td:last-child {  
  background-color: rgb(191, 226, 250) !important;  
  border-top: solid 3px rgb(42, 141, 212) !important;  
  border-bottom: solid 3px rgb(42, 141, 212) !important;  
  border-right: solid 3px rgb(42, 141, 212) !important;  
 }  

Conclusion

With only 4 CSS classes, 1 JavaScript function, and a script to execute the function we have row highlighting.  One of the many advantages to this solution is that we never had to alter the html that rendered the grid/table.  Happy highlighting!

Try It Now:  demo