Highlighting row and column in a table

Highlighting row and column in a table

Hi,

I'm trying to make a php/jquery-based puzzle game where I have a standard html table (#puzzlegrid) generated by php, and I want to highlight certain parts of it when the mouse is hovering over it. I have one table where there are four different parts (split in the middle vertically and horizontally), separated by id's. The left and topmost cells has id="empty", all the rows beneath these has id="row-clues", the columns next to "empty" has id="column-clues" and finally the bottom-right cells has id="playing-grid", which the hover-function belong to. The number of #column-clues and #column-rows can vary, both in the count of rows and columns. I can give a example code if it's necessary.

As for the jquery-part, I simply want to highlight (add a css class) the current row and column when i hover over the #playing-grid cells. That means selecting all #column-clues and all #column-rows cells that exist on the same row/column the mouse is hovering over. This is what I have so far

  1. $("#puzzlegrid td#playing-grid").hover(function() {
  2. var current_rowIndex = $(this).parent()[0].rowIndex;
  3. var current_columnIndex = $(this).parent().children().index($(this));
  4. $("tr").eq(rowIndex).addClass("highlight");
  5. $("td").eq(current_columnIndex).addClass("highlight");
  6. , function() {
  7. var current_rowIndex = $(this).parent()[0].rowIndex;
  8. var current_columnIndex = $(this).parent().children().index($(this));
  9. $("tr").eq(rowIndex).removeClass("highlight");
  10. $("td").eq(current_columnIndex).removeClass("highlight");
  11. });
The code for rows works like a charm (not really sure how to limit them to #playing-grid, because that's a td id, not tr, so tips are appreciated for this too, for tidiness' sake). The problem is the columns: with the above code I only highlight the single topmost cell in the current column. I want the highlight to extend downwards the column and stop when the id changes into #playing-grid, in other words filter the highlighting to #column-clues only.

I've tried a for-loop and each() without luck, as far as my jquery skills goes (and that's not far ). Is it possible to use the index for highlighting several columns, or do I have to do it another way? I can change the HTML code if that's necessary.

Any ideas or improvements are highly appreciated!