Question

我有一个用jQuery创建的页面，在这个页面中是一个表，其中表行具有将它们标识为某种颜色的类名（即tr class =“yellowclass”）。

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

我的问题是该表是通过getJSON请求动态生成的。要将新内容添加到表中，我首先在表的tbody上执行子（）。remove（），（$（'＃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'复选框，并且页面重新加载了新的表数据，那么当它真的应该隐藏时，黄色类仍会显示出来。

我怀疑这与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()。然后，该行被添加到tbody的末尾。你需要扩展if语句，为你的其他颜色添加更多逻辑。

在动态创建的内容上执行jQuery show / hide

1 个答案: