выполнение jQuery показать / скрыть динамически созданный контент

Question

У меня есть страница, которую я создал с помощью jQuery, и на этой странице есть таблица, в которой строки таблицы имеют имена классов, которые идентифицируют их как определенный цвет (т.е. tr class = "yellowclass").

Пользователь может фильтровать строки, установив флажок, который будет отображать / скрывать таблицы определенного цвета.

Моя проблема в том, что таблица генерируется на лету с помощью запросов getJSON. чтобы добавить новый контент в таблицу, я сначала выполняю children (). remove () для tbody таблицы ($ ('# my_table_tbody'). children (). remove ()), а затем использую appendTo для добавления новая таблица информации обратно.

пример этой функции:

$('#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'));
});

Теперь в конце этой функции я пытаюсь проверить, установлены ли флажки, и если да, показать / скрыть новую информацию. Например, чтобы в основном позвонить

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

Проблема в том, что страница не хочет "помнить", что было проверено. Другими словами, если флажок «yellowclass» не установлен и страница перезагружается с новыми данными таблицы, класс yellowclass все еще отображается, когда его действительно следует скрыть.

Я подозреваю, что это как-то связано с DOM и созданием правильных элементов DOM, которые можно показать / скрыть. Но я не знаю, как это сделать в моей конкретной ситуации. Я системный программист, и я просто занимаюсь этим, чтобы запрограммировать инструмент, который предоставил бы нашим тестировщикам некоторую информацию о состоянии. Я не эксперт в том, что касается JavaScript, у меня мало понимания DOM, и я не могу понять это.

Как я могу вставить на страницу, чтобы я мог правильно показать и скрыть эту информацию?

Если я обновлю страницу новыми данными таблицы, а затем поставлю галочки и сниму флажки, все будет работать нормально. Но если я загружаю данные таблицы и просто проверяю состояние блоков, как они есть, это не хочет работать. Требуется ли jQuery немного времени для создания DOM-объектов, прежде чем они будут доступны?

Спасибо за любую помощь.

Answer 1

Может, как-то так?

$('#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');
    }
});

По сути, каждая строка создается как фрагмент DOM, а затем выполняется условное выражение. Если $('#my_yellow_color_cb:checked').length равно 0, то есть флажок желтого цвета не установлен, тогда для строки выполняется .hide(). Затем строка добавляется в конец тела. Вы захотите расширить оператор if, добавив больше логики для других ваших цветов.