performing jQuery show/hide on dynamically created content

Question

I have a page I created with jQuery, and in this page is a table where the table rows have classnames that identify them as a certain color (i.e. tr class="yellowclass").

The user is able to filter rows by clicking a checkbox that will show/hide tables of a certain color.

My problem is that the table is generated on the fly via getJSON requests. to add the new content to the table, I first do a children().remove() on the table's tbody, ($('#my_table_tbody').children().remove()), and then I use appendTo to add the new table information back in.

an example of this function is:

$('#my_table_tbody').children().remove();
$.getJSON("http://my_url.com/my_cgi_bin/my_cgi", {data: mydata}, function(j) {
    var mylength = j.length;
    for (var k = mylength - 1; k >= 0; k--)
        $('<tr class="' + j[k].color + '"><td class="my_first_col_class">' + j[k].data1 + '</td><td class="my_second_col_class">' + j[k].data2 + '</td></tr>').appendTo($('#my_table_tbody'));
});

Now at the end of this function, I am trying to check to see if checkboxes are checked, and if so, to show/hide the new information. For example, to basically call

if (('#my_yellow_color_cb').attr('checked'))
    $('.yellowclass').show();
else
    $('.yellowclass').hide();

The problem is, the page isn't wanting to "remember" what has been checked. In other words, if the 'yellowclass' check box is unchecked, and the page reloads with new table data, the yellowclass class is still showing up, when it really should be hidden.

i suspect this has something to do with the DOM, and creating proper DOM elements that can be shown/hidden. But i don't know how to do this in my particular situation. I am a systems programmer, and am just doing this to program a tool that would provide our testers with some status info. i am no expert when it comes to JavaScript and have little understanding of the DOM, and can't seem to figure this one out.

How can I insert into the page so that I can properly show and hide this information?

If I update the page with new table data, and then check and uncheck boxes, then things work fine. But if I load table data, and just check the status of the boxes as they are, it's not wanting to work. Does jQuery take a little time to get DOM objects created before they can be accessed?

Thanks for any help.

Answer 1

Perhaps something like this?

$('#my_table_tbody').children().remove();
$.getJSON("http://my_url.com/my_cgi_bin/my_cgi", {data: mydata}, function(j) {
    var mylength = j.length;
    for (var k = mylength - 1; k >= 0; k--) {
        var $row = $('<tr class="' + j[k].color + '"><td class="my_first_col_class">' + j[k].data1 + '</td><td class="my_second_col_class">' + j[k].data2 + '</td></tr>');

        if ($('#my_yellow_color_cb:checked').length == 0 && $row.is('.yellow'))
            $row.hide();

        $row.appendTo('#my_table_tbody');
    }
});

Basically, each row is created as a DOM fragment and then the conditional is run. If $('#my_yellow_color_cb:checked').length is 0, meaning the yellow color check box is not checked, then .hide() is executed for the row. Then, the row is added to the end of the tbody. You'll want to extend the if statement with more logic for your other colors.