jQuery - Highlight table row and column on cell selection

Using jQuery we can do interesting tasks fast. The only thing you need to do is to thing of the required logic and look into the jQuery API for correct type of selectors to get your work done.

In this post we are going to see how to highlight a complete row as well as the HTML table column when the mouse moves over a particular cell i.e. <td> .

What is required is to highlight the current row in a particular color,  highlight the current column in a particular color and highlight current cell in a particular color.

As you can see in the above image when the mouse cursor is over the cell the color of the cell is set to orange, row color is set to light blue and the column color is set to light green.

Let us see what can is to be done

• Here changing the color of the current cell is and row is quite easy. We simply use jQuery to 'this' selector with 'mouseover' event and change background color with CSS. 
  • $(this).css("background","orange");
• Change the color of the current row, we select the parent of the cell which will be the table row.
  • $(this).parent().css("background","lightblue");
• Last the tricky part is to select the same cell in every other row, which will actually constitute to our row.
  • First we find the index of the current cell and store it in a variable.
  • Since the index value retrieved from index() begins at '0' zero, we will need to increment it by 1, as jQuery will read value from 1.
    • let col_index = $(this).index();  col_index++;
  • Next we use this value as the nth-child  td or every row of our table.
  • To select all the rows in the same table, we can select the 'siblings' of the parent of current selected cell. Which in turn are all the rows in the table.
  • $(this).parent().siblings().children(":nth-child("+col_index+")").css("background","lightgreen");
  • In the above code we select the children of each sibling with a filter of nth-child passed with the col_index value.
• The second part will be of mouse out where we simply need to reset background colors of the table cell to none or  the default value.

The following code is the implementation, the sequence is set the row color first, second the column colors and finally the cell color.

<script>
$(document).ready(function(){
 $("td").on("mouseover",function(){
         let col_index = $(this).index();  
         col_index++;
         $(this).parent().css("background","lightblue");
         $(this).parent().siblings()
         .children(":nth-child("+col_index+")")
         .css("background","lightgreen");
         $(this).css("background","orange");
   });
 $("td").on("mouseout",function(){
     $(this).css("background","none");
     $(this).parent().siblings().children().css("background","none");
     $(this).parent().css("background","none");
 });
});
</script>