jQuery and GridView : How to highlight current cells column and row

We do not have any direct functionality : so every time on hover of a cell, [I] we will color whole grid with default ( no highlight) color [II] then we will highlight current row [III] then we will highlight current column.

GridView cell ("tr td") will be our base for all these actions.

jQuery closest() and prevAll will play a very important role in deriving current row and column index.




       $(document).ready(function() { //document start
            $("#<%=GridView1.ClientID%> tr td").hover( /*hover start*/
        function()  /*func1*/{ /*$(this).css("background-color","red");*/
            var colindex = $(this).closest("tr td").prevAll("tr td").length;
            var rowindex = $(this).closest("tr").prevAll("tr").length;
            $(document).find("#<%=mlabel.ClientID%>").text(colindex + ' ' + rowindex);
           
            /* color all the grid with default background - this is necessary to erase earlier effects */
            $("#<%=GridView1.ClientID%> tr td").each(function() { $(this).css("background-color", "blue"); });
            /* color this row with highlight color - note we are taking tr here, then going to each td and coloring it. somehow coloring full tr is not workig, possibly because we are hovering over "tr td" and not "tr" */
            $("#<%=GridView1.ClientID%> tr").eq(rowindex).find("td").css("background-color", "red");            
            /* color this column - the technique is to color nth col of each row , iteratively */
            $("#<%=GridView1.ClientID%> tr").each(function() { $(this).find("td").eq(colindex).css("background-color", "red"); });
        }, /* func1*/
       
         /* func2  - this has almost no role*/
        function() { $(this).css("background-color", "blue"); }
        /* func2 */      
       
            /*hover end*/);


         
        });     //document end