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
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.
The best way to highlight a row is to add a class to the tr element; that's pretty easy and it looks like you have that under control
Highlighting columns can be done by manually adding a class to each td, but that can be slow and definitely isn't elegant. Instead, you can add col/colgroup elements to the top of the table and add your class to those elements.
Here's some code adapted from an earlier post, here:
Try this. When hovering over a td, find its table and then tds within it that are at the same child-position, add to this the td's parent (tr) and highlight them all. Note that nth-child counts from 1.
Thanks, both of the suggestions worked like a charm!
I'm wondering, is there a way to reduce the jerkiness/slowiness in Internet Explorer? In Opera and Firefox it works perfectly, but in IE8 it's extremely slow. Even if I move my mouse slowly, it takes a second for the highlighting to "follow", and it skips several columns and rows while trying to catch up.
Any idea what causes it, or if there's a fix for it?
Leave a comment on anncke's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic