[jQuery] Re: Issue with jQuery zebra tables tutorial...

[Karl Swedberg]

So, it looks like the problem you're having is that the style for the  
"over" class is not overriding the "alt" class. The simple solution  
would be to give a higher specificity to the "over" class's CSS rule.  
Something like this, perhaps, in your stylesheet:

.alt { background-color: #ccc; }
tr.over { background-color: #ff0; }

With the added "tr" for the "over" class, it will successfully  
override the "alt" class's background color.

Then to apply it, use the .hover() method:

$(".stripeMe tr").hover(function() {
  $(this).addClass('over');
}, function() {
  $(this).removeClass('over');
});


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 4, 2008, at 3:11 PM, bryce4president wrote:


I've just started working with jQuery today.  One of the things I've
been doing is using zebratables, but it has been with a javascript
function I found that runs off the window.onload.  I like the idea of
doing this in jQuery as it is definitely faster (i tested it) and it
is a lot cleaner and simpler.

Here's the problem.   I do the   $(".stripeMe
tr:even").addClass("alt");  and  it works just fine.  Then I have
the   $(".stripeMe tr").mouseover(function(){
                        $(this).addClass("over");
                });

But instead of replacing the class that is there, it actually adds it
to it.  so then it will say <tr class="alt over">

So I put this in, $(".stripeMe tr").mouseover(function(){
                        $(this).removeClass().addClass("over");
                });

Adding the removeClass() does the trick.  The problem after that is
that when I do the mouseout I have no way of knowing what the previous
class was.  So I have to do a
                $(".stripeMe tr").mouseout(function(){
                        $(this).removeClass();
                        $("stripeMe tr:even").addClass("alt");
                });

This is not good for larger tables as it can make the page seem
glitchy when doing a mouseover.  I didn't know if there was a way to
find out in $(this) is even or not....

This works the same in IE6 and FF2.  Am I doing something wrong or is
the tutorial not correct?  I understand how it is theoretically
supposed to work in the tutorial, but its not right.

Thanks for the help.
Love jQuery by the way.  Great library.