使用jQuery來滑動一組錶行

我是相當新的javaScript和jQuery，所以希望這將是一個快速修復。我需要顯示一個包含可以分成幾個類別的數據的表格，並且我想實施一個slideToggle來隱藏/顯示每個給定類別中的所有觀察值。使用jQuery來滑動一組錶行

下面的代碼應該（理想情況下）顯示一個包含4列和9行的表格，每行3行以綠色「Section i」行開頭。我希望每個Section標題能夠像slideToggle一樣工作，以展開或摺疊下面的所有行。目前，沒有任何東西正在崩潰。有什麼想法嗎？

<head> 
    <style type="text/css"> 
    td{padding:5px;} 
    </style> 

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $(".flip").click(function(){ 
      $(this).next(".section").slideToggle(); 
     }); 
    }); 
    </script> 

</head> 

<body> 
    <p> 
     <table id="main_table"> 
     <thead> 
      <tr class="firstline"> 
       <th>Column1</th> 
       <th>Column2</th> 
       <th>Column3</th> 
       <th>Column4</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr style="background-color:green; color:white"> 
       <td colspan="4" class="flip"> Section 1 </td> 
      </tr> 
      <div class="section"> 
      <tr> 
       <td>item 111</td> 
       <td>item 112</td> 
       <td>item 113</td> 
       <td>item 114</td> 
      </tr> 
      <tr> 
       <td>item 121</td> 
       <td>item 122</td> 
       <td>item 123</td> 
       <td>item 124</td> 
      </tr> 
      <tr> 
       <td>item 131</td> 
       <td>item 132</td> 
       <td>item 133</td> 
       <td>item 134</td> 
      </tr> 
      </div> 
      <tr style="background-color:green; color:white"> 
       <td colspan="4" class="flip"> Section 2 </td> 
      </tr> 
      <div class="section"> 
      <tr> 
       <td>item 211</td> 
       <td>item 212</td> 
       <td>item 213</td> 
       <td>item 214</td> 
      </tr> 
      <tr> 
       <td>item 221</td> 
       <td>item 222</td> 
       <td>item 223</td> 
       <td>item 224</td> 
      </tr> 
      <tr> 
       <td>item 231</td> 
       <td>item 232</td> 
       <td>item 233</td> 
       <td>item 234</td> 
      </tr> 
      </div> 
      <tr style="background-color:green; color:white"> 
       <td colspan="4" class="flip"> Section 3 </td> 
      </tr> 
      <div class="section"> 
      <tr> 
       <td>item 311</td> 
       <td>item 312</td> 
       <td>item 313</td> 
       <td>item 314</td> 
      </tr> 
      <tr> 
       <td>item 321</td> 
       <td>item 322</td> 
       <td>item 323</td> 
       <td>item 324</td> 
      </tr> 
      <tr> 
       <td>item 331</td> 
       <td>item 332</td> 
       <td>item 333</td> 
       <td>item 334</td> 
      </tr> 
      </div> 
     </tbody> 
     </table> 
    </p> 
</body>

來源

2011-02-24 CCC

http://jsfiddle.net/xpZTv/ – AndreKR 2011-02-24 23:26:51

第一：你不能table'和'td'之間'使用'div'。第二：「td.flip」沒有元素* next（）*（它沒有兄弟）。 – AndreKR 2011-02-24 23:31:46

我有真正的問題試圖做類似的jQuery和表，似乎表沒有真正發揮球，所以我拋棄了表和使用divs而不是更好的工作:-) – Rob 2011-02-25 00:43:30

不能混合<div> s轉換爲<table>那樣，使用額外的<tbody>元素來代替。在你的回調中，this是<td>元素沒有兄弟姐妹，所以.next沒有任何用處;你想回去，直到你到達與你感興趣的.section深度相同的深度，然後從那裏撥打.next。

你的HTML應該看起來更像是這樣的：

<table id="main_table"> 
    <thead> 
     <tr class="firstline"> 
      <th>Column1</th> 
      <th>Column2</th> 
      <th>Column3</th> 
      <th>Column4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr style="background-color:green; color:white"> 
      <td colspan="4" class="flip"> Section 1 </td> 
     </tr> 
    </tbody> 
    <tbody class="section"> 
     <tr> 
      <td>item 111</td> 
      <td>item 112</td> 
      <td>item 113</td> 
      <td>item 114</td> 
     </tr> 
     <!-- ... -->

而且你的點擊處理程序是這樣的：

$('.flip').click(function() { 
    $(this) 
     .closest('tbody') 
     .next('.section') 
     .toggle('fast'); 
});

的.closest電話追溯到你的祖先，直到找到一個<tbody>然後調用那就是.next。

更新的jsfiddle：http://jsfiddle.net/ambiguous/Udxyb/4/

來源

2011-02-25 03:39:27

嘿，這個完美的作品。謝謝！ – CCC 2011-02-25 14:32:09

請注意，原始問題要求使用slideToggle，而這顯然不適用於此方法。將'toggle'改爲'slideToggle'會中斷動畫。 http://jsfiddle.net/m83Pc/ – supertrue 2012-06-12 21:02:33

@supertrue：這是前一段時間，所以我不知道'slideToggle'到'toggle'開關的來源。我懷疑動畫問題是'

'內通常顯示和嵌套問題的副作用。我會捅一下，看看我能想出什麼。 – 2012-06-12 22:01:58

相關問題

使用jQuery來滑動一組錶行

回答

相關問題