Mark Harwood schrieb:
> Im trying to figure out how i could go about highlighting table cells
> that are grouped vertically when you hover over the THEAD element or the
> TFOOT element.
>
> Im not sure how i should grab them via jQuery though.
>
> Say we have a table like
>
> <table>
> <thead>
> <tr>
> <th>People</th> <--// Hove over this //->
> <th>Ages</th>
> <th>Email</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td>John</td> <--// Highlight this //->
> <td>68</td>
> <td>none</td>
> </tr>
> <tr>
> <td>Joe</td> <--// Highlight this //->
> <td>99</td>
> <td>none</td>
> </tr>
> <tr>
> <td>Mary</td> <--// Highlight this //->
> <td>72</td>
> <td>none</td>
> </tr>
> </tbody>
> </table>
>
> Any ideas? it would need to select all the TD directly below it, or
> above it if we was highlighting a TFOOT element
Mark,
maybe you can do something via the col element, but I don't know how to
get the relation from the cell to the column (I suspect there's
something like a td.column property but I'm not sure) - so here's what
came to my mind first:
$(function() {
$('th').each(function() {
var index = $('th').index(this);
var rows = $(this).parents('table').find('tr');
var highlightClass = 'highlight';
$(this).hover(
function() {
rows.each(function() {
$('td, th', this).eq(index).addClass(highlightClass);
});
},
function() {
rows.each(function() {
$('td, th', this).eq(index).removeClass(highlightClass);
});
}
);
});
});
plus CSS:
.highlight {
background: yellow;
}
Demo:
http://stilbuero.de/demo/jquery/columns.html
Happy coding,
Klaus
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
