Hide all tr with the same class using javascript

Question

I want to hide every tr with class different than "positive" when clicking on "positive" link, and hide all tr with class different than "negative" when clicking on "negative" link.

This is my HTML:

<a href="" id="positive"> Positive rows</a>
<a href="" id="negative"> Negative rows</a>
<?php
$i=1;
while ($u=mysql_fetch_array($result2)){
?>
<tr id="row<?php echo $i;?>" class="<?php echo $u['positive_negative'];?>"> //echo $u['positive_negative'] can result on "Positive" or "Negative" text.
   <td><? echo $u['date'];?></td>
   <td><? echo $u[''positive_negative'];?></td>
   <td><? echo $u['user_id'];?></td>
</tr>
<?php
$i++;
};
?>

I have tried this script but is not working:

$(document).ready(function(){
$('#positive').click(function(){ 
$('.positive').show(200); 
$('.negative').hide(200); 
}); 
$('#negative').click(function(){ 
$('.negative').show(200); 
$('.positive').hide(200); 
}); 
});

Thanks in advance for any help!

Answer 1

Try this:

$('#positive, #negative').click(function(e){ 
    e.preventDefault();
    $('tr').not($('.'+this.id).show(200)).hide(); 
   //select all tr, provide a specific table id as well to distinguish, but not the ones with this classname which you want to show hide others.
}); 

Also note the table should not directly contain tr as a descendant.

Demo

Answer 2

This should work:

$('tr').not('.positive').hide();

Answer 3

Your javascript should work, if your classes are being labelled properly. When hiding, you should be searching for not .negative, and not .positive as the others have alluded to, but if your code isn't working at all, the error lies in how you've laid out your html, not your javascript, as I've tested in with jsfiddle. Check in firebug or developer tools to see if your class names are being assigned properly, or if there are any errors in the console.

Here's another way of doing it with fadeIn and fadeOut, but the earlier examples will work also:

$(document).ready(function(){
    $('#positive').click(function(){  
        $('tr').not('.positive').fadeOut(function(){$('.positive').fadeIn();});
    }); 

    $('#negative').click(function(){             
        $('tr').not('.negative').fadeOut(function(){$('.negative').fadeIn();}); 
    }); 

});

Basic mockup with some vanilla html: http://jsfiddle.net/v8k3H/3/

Answer 4

Did you add the jquery.js file. It looks like you forgot to add the .js file or it is not loading.

And check the spelling "Positive" / "positive"