Home › Forums › CSS › Table Row and Column Highlighting on multiple tables › Re: Table Row and Column Highlighting on multiple tables
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’);
}
});
});
});