執行jQuery的顯示/隱藏上動態創建的內容

Question

我有我用jQuery創建的頁面，並且在當前頁是一個表，其中表中的行具有其識別爲一個特定的顏色的類名（即TR類=「yellowclass」） 。

用戶能夠通過點擊複選框，將顯示特定的顏色的/隱藏表來過濾行。

我的問題是，在通過的getJSON請求動態生成表格。 （），。（），remove（）），然後使用appendTo添加新的內容到表中，我首先在表的tbody上執行一個children（）。remove 。新表的信息早在

這個函數的例子是：

$('#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()。然後，該行被添加到tbody的末尾。你會想要用更多的邏輯爲其他顏色擴展if語句。