用jQuery動態地隱藏表格行

我想要替換表格行的背景顏色，每一部分以相同的顏色開始。我已用下面的代碼來實現這一點：用jQuery動態地隱藏表格行

$(document).ready(function(){ $("tbody tr.row:nth-child(even)").css("background", "#efefef"); });

我還需要能夠以限制各自TBODY部內可見的行（5例如）的數量。這些需要能夠通過.click（）事件與按鈕切換。有誰知道我怎麼能做到這一點？我提出的唯一解決方案導致背景顏色破裂。任何幫助將不勝感激！

下面是表結構的一個例子：

<table> 
    <tbody> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
    </tbody> 

    <tbody> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
    </tbody> 
</table>

來源

2009-08-18 ktross

這應該做的伎倆：

$(function() { 
    $('#showAll').click(function() { 
     $('table > tbody').each(function() { 
      $(this).children('tr:gt(4)').toggle(); 
     }); 
     $("tr:visible").filter(':odd').css("background", "#efefef").end() 
      .filter(':even').css("background", "#ffffff"); 
    }).click(); 
});

編輯清理代碼（由@ karim79的回答啓發）。

來源

2009-08-18 21:59:54 dcharles

這工作得很好，但有一個問題。最後一個可見的tr似乎沒有填充，在顯示隱藏行之後，它具有正常的填充，但剛剛顯示的行具有雙重填充。這似乎是一個mozilla的事情。你知道這個問題可能是什麼嗎？ – ktross 2009-08-18 22:54:44

很難說沒有看到實際的CSS和HTML。這可能是一個無意的CSS規則的影響，或者可能是無效的表結構。注意：在交替行代碼中發現錯誤後，我更新了答案。 – dcharles 2009-08-18 23:30:03

當我使用規則'table tr {padding：2px; }'最後一行似乎正確顯示，不管可見性如何。 – dcharles 2009-08-18 23:35:57

滾動。將表格的高度設置爲5行將適合的內容，然後使用css

overflow：scroll; ：d

來源

2009-08-18 21:54:55

行最終是不同的大小，所以這不幸的是不會工作得很好。謝謝你的想法！ :) – ktross 2009-08-18 21:57:25

這它（測試）：

var rowLimit = 5; 
$(document).ready(function() { 
    $('button').click(function() { 
     //hide everything after the rowLimit row 
     $('table > tbody > tr:gt(' + (rowLimit - 1) + ')').toggle(); 
    }); 
});

的關鍵是在gt selector

要防止排款式消失，把它們放在一個CSS類，並使用addClass與removeClass代替申請他們，請記住，如果他們不在課堂上，那麼他們不存在:)

來源

2009-08-18 22:00:10 karim79

用jQuery動態地隱藏表格行

回答

相關問題