- This topic is empty.
-
AuthorPosts
-
April 18, 2013 at 5:26 pm #44227hellsingMember
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?
April 18, 2013 at 5:39 pm #132372hellsingMemberHere is a screen capture to better understand what happens when the mouse pointer is over the lower table:
![highlight error](http://www.rozsahegyi.net/images/tableHighLight.jpg ‘Check the lighter cols and rows’)
April 18, 2013 at 11:55 pm #132383MottieMemberHi @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’);
}
});
});
});April 19, 2013 at 12:02 am #132385MerriParticipantI 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.
April 19, 2013 at 3:42 am #132412hellsingMemberThanx Guys, both of you helped me a lot!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.