Tablesorter : Mouseover not working after applying sorting on table

Question

css

.ItemRowHover td {background-color:#ff9900; }

jscript

$('.items').tablesorter();

// these two mouse events work unless the sorting is done,
// as soon as the table is sorted by clicking any of the header columns, these cease working.

$('.items tr').each(function(){ 
  $(this).bind('mouseover', function(){ 
    $(this).addClass('ItemRowHover');  
  }); 
});


$('.items tr').each(function(){
  $(this).bind('mouseout', function(){
    $(this).removeClass('ItemRowHover'); 
  }); 
});

After sorting the table by any column, the hover jQuery stops working, but works when the page loads the first time and the table is unsorted by clicking any of the headers.

Dhaval Marthak · Answer 1 · 2013-12-26T16:28:35.093

3

Why don't you change the selectors like this?

try with this : $('tr.items')

$(document).ready(function () {
    $("#myTable").tablesorter();
    $('td.items').hover(function () {
        $(this).addClass("ItemRowHover");
    }, function () {
        $(this).removeClass("ItemRowHover");
    });
});

Also change your Css to

td.ItemRowHover {background-color:#ff9900; }

If you want to change the background of a td only on hover, then use only CSS. No need of jQuery

Suppose table is having ID tblData then CSS should be

#tblData tr:hover
{
   background-color:#ff9900; 
}

Fiddle Demo with CSS

Fiddle Demo with JS

edited Dec 26 '13 at 16:28

answered Dec 26 '13 at 15:48

Dhaval Marthak

17,246
6
46
68

which one would be more efficient, using hover in CSS or in Javascript? – sqlchild Dec 27 '13 at 05:37
I also did this before the hover code, ---- $('.items tr:even').addClass('ItemsEvenRow'); now after sorting , only odd rows possess the hover property and not the even ones ? – sqlchild Dec 27 '13 at 05:40
@sqlchild I suggest you to use CSS, No javascript! and for the second scenario that you've tried will possess the even rows hover not the odd ones! – Dhaval Marthak Dec 27 '13 at 05:53
but I need the hover for both odd and even rows? how do I do that using JavaScript – sqlchild Dec 27 '13 at 06:08
did you get the way out ? – sqlchild Dec 27 '13 at 08:10
is there no way I could get both, odd and even rows background-color change on mouse-over after sorting ? – sqlchild Dec 27 '13 at 08:11
@sqlchild Yes i have, just hold on a minute please! – Dhaval Marthak Dec 27 '13 at 08:12
but why does the hover property stops working after sorting...is there some sort of discrepancy in tablesorter plugin? – sqlchild Dec 27 '13 at 08:20
@sqlchild I just cracked it with only css, [here](http://jsfiddle.net/6ecr4/5/) it is! – Dhaval Marthak Dec 27 '13 at 08:22
could you please figure out the javascript too :) – sqlchild Dec 27 '13 at 08:35
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/43978/discussion-between-sqlchild-and-dhaval-marthak) – sqlchild Dec 27 '13 at 08:35
I need to give a fixed background-color to the headers, which should not change on any event – sqlchild Dec 27 '13 at 09:09
the important keyword is the key to success :)...great help – sqlchild Dec 27 '13 at 09:21
@sqlchild sqlchild It's not necessary always to use !important, it just takes a precedence but it's not good practice! Don't use it until it's required! :) Can you mark answer as accepted? – Dhaval Marthak Dec 27 '13 at 09:32
but in this case, we are compelled to use !important...there isn't any other solution i guess ? – sqlchild Dec 27 '13 at 09:54
@sqlchild To be frank, In this case i think it's mandatory to use `!important` – Dhaval Marthak Dec 27 '13 at 09:55
so it isn't the problem of tablesorter plugin? but i use another sorter plugin where this problem doesn't occurs – sqlchild Dec 27 '13 at 09:58
No, it isn't problem! – Dhaval Marthak Dec 27 '13 at 09:59
can you tell other way to zebra output to table and then apply tablesorter on it which retains the hover property...as this way is a more typical one – sqlchild Dec 27 '13 at 10:01
+1, but I think that this answer isn't working for @sqlchild because `.items` is the class name of the table, not the `td` - maybe that is the cause of the confusion? As stated in [my answer](http://stackoverflow.com/a/20833302/145346) to this "same" question, it can be solved by using more specific css. – Mottie Jan 04 '14 at 21:49

Zach Lysobey · Answer 2 · 2013-12-27T17:55:22.377

1

Haven't tested this code yet, and this might not address your root problem, but you should be able to do this in a simpler way, as one statement using hover() with no each() functions.

$('.items tr').hover(function(){
    $(this).addClass('ItemRowHover'); 
}, function(){
    $(this).removeClass('ItemRowHover'); 
});

edit: Some more (untested) code per the discussion in the comments

$('.items').on("mouseover", "tr", function(){
    $(this).addClass('ItemRowHover');
}).on("mouseout", "tr", function(){
    $(this).removeClass('ItemRowHover'); 
});

Using on() is necessary if the element you want to attach the event to is dynamically added to the DOM. Internally (to jQuery), it sets the event listener to an element that will always be present. (.items in the above example), and then the on function's 2nd argument ("tr" in the above example) is accessed via a DOM concept known as "event bubbling" This is all from memory and may be a bit confused or wrong. A couple googles should yield more information.

edited Dec 27 '13 at 17:55

answered Dec 26 '13 at 15:41

Zach Lysobey

14,959
20
95
149

I also did this before the hover code, ---- $('.items tr:even').addClass('ItemsEvenRow'); now after sorting , only odd rows possess the hover property and not the even ones ? – sqlchild Dec 27 '13 at 05:41
1

Still haven't gotten a viable solution? Well, I bet the problem is that the tablesorter actually removes elements from the DOM then re-inserts them (just guessing). If this is the case, you will want to use jQuerys `on()` method. Some more information here: http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements. If I get a chance today, I'll try to put together a demo for you. You'll probably have to use `mouseover` and `mouseout` again. (`$('.items').on("mouseover", "tr", function(){...`) – Zach Lysobey Dec 27 '13 at 15:36
yes , you are right sir :) , i can say this as i have many tooltips on the table td rows which also vanish as soon as I sort the table using tablesorter...what's the solution then? – sqlchild Dec 27 '13 at 17:34

score 1 · Answer 3 · answered Dec 26 '13 at 15:44

1

Try This Example:

$('.items').tablesorter();

var $rows = $('.items tr');
$rows.hover(function () {
    $(this).addClass("rowHover");
}, function() {
    $(this).removeClass("rowHover");
});
Then create the stylesheet rule for zebra rows being hovered:

.even.rowHover,
.odd.rowHover {
    background-color: #F0F0F0;
}

answered Dec 26 '13 at 15:44

Priya jain

753
2
5
15

thank you , also I want to enable table sorting in the columns of the second row of my table , is it possible ? – sqlchild Dec 27 '13 at 05:20

Tablesorter : Mouseover not working after applying sorting on table

3 Answers3