Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Table Row and Column Highlighting on multiple tables Re: Table Row and Column Highlighting on multiple tables

#132383
Mottie
Member

Hi @hellsing!

Try this code ([demo](http://jsfiddle.net/Mottie/quHEc/)):

$(function () {
$(‘table’).each(function () {
var $table = $(this).delegate(‘td’, ‘mouseover mouseleave’, function (e) {
if (e.type == ‘mouseover’) {
$(this).parent().addClass(‘hover’);
$table.find(‘colgroup’).eq($(this).index()).addClass(‘hover’);
} else {
$(this).parent().removeClass(‘hover’);
$table.find(‘colgroup’).eq($(this).index()).removeClass(‘hover’);
}
});
});
});

Or, if you’re using jQuery 1.7+, it’s better to use `.on()` instead of `.delegate()` ([demo](http://jsfiddle.net/Mottie/quHEc/1/)):

$(function () {
$(‘table’).each(function () {
var $table = $(this).on(‘mouseover mouseleave’, ‘td’, function (e) {
if (e.type == ‘mouseover’) {
$(this).parent().addClass(‘hover’);
$table.find(‘colgroup’).eq($(this).index()).addClass(‘hover’);
} else {
$(this).parent().removeClass(‘hover’);
$table.find(‘colgroup’).eq($(this).index()).removeClass(‘hover’);
}
});
});
});