代码之家 › 专栏 › 技术社区 › jasonmclose

对动态创建的内容执行jquery show/hide

dom json ajax jquery javascript

jasonmclose · 技术社区 · 15 年前

我用jquery创建了一个页面,在这个页面中,表行的类名将它们标识为某种颜色(即tr class=“yellowClass”)。

用户可以通过单击将显示/隐藏特定颜色表的复选框来筛选行。

我的问题是表是通过getjson请求动态生成的。要将新内容添加到表中,我首先对表的tbody($(''my table''utbody').children().remove())执行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对象之前是否需要一点时间来创建它们?

谢谢你的帮助。

1 回复 | 直到 15 年前

CalebD 15 年前

也许是这样的?

$('#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() 对行执行。然后,行被添加到tbody的末尾。您需要用其他颜色的更多逻辑来扩展if语句。