Table Row and Column Highlighting on multiple tables

[hellsing]

Hi Guys,

I use the code from Chris Coiyer’s article ‘Table Row and Column Highlighting’. Here is the code:

$(document).ready(function() {

$('table').delegate('td','mouseover mouseleave', function(e) {

if (e.type == 'mouseover') {

$(this).parent().addClass('hover');

$('colgroup').eq($(this).index()).addClass('hover');

}

else {

$(this).parent().removeClass('hover');

$('colgroup').eq($(this).index()).removeClass('hover');

}

});

});";

Everything was fine until I used only one table per page. Now I have a page with 14 tables (results of a questionarie). The highlight on the rows are OK, but the columns are highlighted allways on the uppermost table, even if the mouse is over a lower one. The HTML markup is OK.

I think this line should work fine:

$('colgroup').eq($(this).index()).addClass('hover');

…but it adds the ‘hover’ class allways to the colgroup of the first table.

Any idea how should I modify the code?

[hellsing]

Here is a screen capture to better understand what happens when the mouse pointer is over the lower table:


[Mottie]

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’);
}
});
});
});

[Merri]

I did other kind of improvements on this: http://codepen.io/Merri/pen/IDlhq

$(function() {

$(‘table’).on(‘mouseenter mouseleave’, ‘td’, function(e) {
(function(td, type) {
td.parent()[type](‘hover’);
td.closest(‘table’).children(‘colgroup’).eq(td.index())[type](‘hover’);
})(
$(this),
e.type === ‘mouseenter’ ? ‘addClass’ : ‘removeClass’
);
});

});

Removed some code repetition, used mouseenter instead of mouseover and also fixed the bug of not finding the related colgroup elements. CodePen sample also includes code to add new rows so you can see it is indeed dynamic.

[hellsing]

Thanx Guys, both of you helped me a lot!

[Author]

Posts