How to highligh the row and column of a table when over a cell using jQuery?

Question

I have a table 10x10 in html if I add a function for each td hover, how can I get the cell column and row index?

Thanks.

Answer 1

You wouldn't need to know the column and row index to apply a hover effect, you can simply use the hover function

http://docs.jquery.com/Events/hover#overout

Answer 2

Haave a look at this answer. If you're implementing it yourself then to get row highlighting, you would just either use the pseudo css class :hover or jump to closest parent <tr> and apply a css class to background color the children <td>.

To answer how you get the column and row indexes, use the jQuery .index() command

Answer 3

As others have said, there may be a better way of doing things than trying to find the exact cell location, but if you do need it this should work:

$("td").hover(function() {
    var columnIndex = $(this).attr("cellIndex");
    var rowIndex = $(this).parent().attr("rowIndex"));
});