CODEWITHSUNDEEP
javascriptjqueryhtml
fuzzy dunlop
fuzzy dunlop

Reputation: 477

jquery hide rows by class not working

im trying to hide inserted rows into a table that have the class "newrow".

Normal rows have an add button that adds these new rows underneath them. Ive a "hide" button that when clicked i want to hide the "newrow"'s inserted which will the rows after the table row where the button is clicked. ive tried to solve it and come up with a solution but its not working and buggy and badly written. Any ideas?

Heres my hide method

$(document).ready(function(){
    $(".hideRow").click(function(event){    

    var found;
    found=false;
    $('tr').each( function() {

        if($(this).attr('class')=='newrow'){
            $(this).hide();
            found=true;
        }
        else if(found==true && $(this).attr('class')=='row'){
            return false;
        }
    });


    }); 
});

Upvotes: 0

Views: 1587

Answers (5)

Ian Wood
Ian Wood

Reputation: 6573

Not sure what you are trying to achieve but based on what you have written this should suffice.

$(".hideRow").click(function() {
    $(this).parents("tr").nextUntil("tr:not(.newrow)").hide();        
});

Tested here.

Upvotes: 3

Jeff B
Jeff B

Reputation: 30099

jQuery has built-in functions to look for class name. When you get the class attribute with attr('class') it contains a string of all classes, so you may get newrow row, etc. When you try to compare that against newrow, you will not match.

$(document).ready(function(){
    $(".hideRow").click(function(event){    
        $('tr .newrow').hide();
    });
});

If you only want the rows from the clicked row to the next normal row class, you can use .nextUntil():

$(document).ready(function(){
    $(".hideRow").click(function(event){    
        $(this).parents('tr').nextUntil('.row').hide();
    });
});

If your newrow elements are also class row, you would need to do this:

$(document).ready(function(){
    $(".hideRow").click(function(event){    
        $(this).parents('tr').nextUntil(':not(.newrow)').hide();
    });
});

If I knew the structure of the html, this could probably be optimized. Without knowing, I am basically guessing.

Also, just FYI, your return false actually returns from the .each() iteration, not from the .click() handler.

Upvotes: 2

Nick
Nick

Reputation: 6025

Yes, it seems overly complicated. You could just have a class hiderow with CSS set as display:none. You can then add or remove this class at will. Or you can use hide();

As I understand it, the user clicks "Add" on row A, which then creates rows B,C... The user can then click "Hide" also on row A to hide rows B,C...

You'd be better off giving row A a unique id (e.g., R32) and then its created children a class (C32 - standing for child of 32). Then when the hide button is clicked on R32 you fire off:

$('.C32').hide();

or if you've created a class hide row with display none:

$('.C32').addClass('hiderow');

You can reverse both the above with show(); or removeClass('hide row'); You could also use toggle();

All this assumes that you could have more than one table row with children you want to hide. If that's not the case, using the unique row id and class for that row's children is probably not necessary.

Upvotes: 2

gastonfartek
gastonfartek

Reputation: 348

if the rows are dynamically created try using 

$('.newrow').live('click',function(){


});

here is a link to jquery api documentation http://api.jquery.com/live/

Upvotes: 1

lmcanavals
lmcanavals

Reputation: 2376

This should do the trick.

$('.hideRow').click(function(){ 
    $('.newrow').hide();
}

you need to show more code otherwise. Try using http://jsfiddle.net or some similar site to share code more easily.

Upvotes: 1

Related Questions