在動態表上顯示隱藏行

Question

<table> //big table 
     <tr > 
     <td></td><td></td><td></td><td></td> 
     </tr>  

     <tr > 
     <th colspan='4'> 
       <div> 
         <table> //small table 
           <tr> 
             <td></td> <td></td><td></td><td></td><td></td> 
           </tr> 
         </table> 
       </div> 
      </th> 
     </tr> 
</table> 

大動態表的每個偶數行都有一個表格，裏面解釋了有關行befor（奇數行）的數據。我想最初隱藏所有偶數行（其中有一個表格的行）。

在每個奇數行我想隱藏/顯示下一個偶數行（其中有一個表裏面）的單擊事件

this is my ajax calls 

    $.get("invoice_ajax.php", 
    {"q": test}, 
    function(data) 
    { 
    $('#balance').html = data; 

與此代碼我想甚至下滑行。

$('#balance').on("click","table",function(event) 
      { 
       event.stopPropagation(); 
       var $target = $(event.target); 
       if ($target.closest("td").attr("colspan") > 1) 
       { 
        $target.slideUp(); 
       } 
       else 
       { 
        $target.closest("tr").next().find("div").slideToggle(); 
       }      
      }); 

起初Ajax調用一切工作正常，每次點擊顯示或隱藏下一行，但在第二個Ajax調用的奇數行的單擊事件（顯示和隱藏下一行）的第三個電話（顯示，隱藏，顯示）在第四次通話（顯示，隱藏，顯示，隱藏）之後，它隨着每個ajax調用而增加。

另外我不知道如何最初隱藏偶數行。

編輯：簡而言之頁面 - http://pastebin.com/QtTxXnzX

Answer 1

...但對奇數行的單擊事件第二Ajax調用（顯示 和隱藏下一行）的第三個電話（顯示，隱藏，顯示）在第 呼叫（顯示，隱藏，顯示，隱藏）後，它會繼續並隨着每個 ajax呼叫而增加。

這是因爲你$('#balance').on("click", "table", ...)事件處理程序是dropBoxChanged功能之內，因此被稱爲每次下拉框中變化。 .on()是用於你正在使用它，但它只需要被調用一次。您的balance div仍保留在ajax調用之間的頁面上，因此每次點擊該元素將由.on()事件處理程序處理。

如此修復它將.on()代碼塊移到dropBoxChanged函數之外，它將正常工作（確保它在$(document).ready(...)函數內）。

此外，你有.slideUp顯示偶數行，但是animations aren't supported on table rows。 .toggle()應該讓你得到你所需要的而不是.slideUp。

另外我不知道如何最初隱藏偶數行。

有兩種方法可以隱藏偶數行：

1. 我建議設置偶數行服務器端已經設置隱藏像class="hide"類（或較不利的直列選項style="display:none"）

2. 使用jQuery在Ajax回調函數，後您將balance格的內容，然後調用類似

$('#balance > table tr:nth-child(even)').hide();