jQuery中的表格行切換

我一直堅持這個問題一段時間了。我知道，對於要順利進行動畫製作的表格行，您需要div s。然後我來到這個解決方案，我可以隱藏我想要的tablerow，但我無法再讓它出現。jQuery中的表格行切換

我需要一些如果解決方案或可能一些切換解決方案。

HTML：

<table> 
    <tbody> 
     <tr> 
      <td class="clickme"> 
       Sample text 
      </td> 
      <td class="clickme">$10</td> 
      <td class="clickme">$100</td> 
      <td class="clickme">$0</td> 
     </tr> 
     <tr class="hideme"> 
      <td colspan="4"> 
       <div> 
        Sample text, sample text, sample text, sample text, sample text, sample text 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td class="clickme"> 
       Sample text 
      </td> 
      <td class="clickme">$10</td> 
      <td class="clickme">$100</td> 
      <td class="clickme">$0</td> 
     </tr> 
     <tr class="hideme"> 
      <td colspan="4"> 
       <div> 
        Sample text, sample text, sample text, sample text, sample text, sample text 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td class="clickme"> 
       Sample text 
      </td> 
      <td class="clickme">$10</td> 
      <td class="clickme">$100</td> 
      <td class="clickme">$0</td> 
     </tr> 
     <tr class="hideme"> 
      <td colspan="4"> 
       <div> 
        Sample text, sample text, sample text, sample text, sample text, sample text 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td class="clickme"> 
       Sample text 
      </td> 
      <td class="clickme">$10</td> 
      <td class="clickme">$100</td> 
      <td class="clickme">$0</td> 
     </tr> 
     <tr class="hideme"> 
      <td colspan="4"> 
       <div> 
        Sample text, sample text, sample text, sample text, sample text, sample text 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table>

的Jquery：

$('.hideme').find('div').hide(); 
$('.clickme').click(function() { 
    $(this).parent().next('.hideme').find('div').slideToggle(500); 
    return false;   
});

正確標記和jQuery被更新。最終JSFiddle：http://jsfiddle.net/NVx4S/21/

來源

2012-08-09 Hardan

我認爲你必須做出更好的HTML結構。 – 2012-08-09 13:58:02

嗯，爲什麼？這是一張簡單的桌子，裏面有一個tbody，兩個tr和som td？ – Hardan 2012-08-10 09:12:26

只是因爲你正在使用js來使用div來包裝文本，而你可以在不使用js的情況下將該div放在頁面中。那麼你可以使用slideToggle（） – 2012-08-10 17:41:36

<table> 
    <tbody> 
     <tr> 
      <td id="content-1" class="clickme"> 
       Sample text 
       <!-- <a href="#content-1" class="clickme">Sample text</a> --> 
      </td> 
      <td>$10</td> 
      <td>$100</td> 
      <td>$0</td> 
     </tr> 
     <tr> 
      <td colspan="4"> 
       <div id="slide-content-1"> 
        Sample text, sample text, sample text, sample text, sample text, sample text 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table>

$('.clickme').click(function() { 
     //$(this.hash).slideToggle(500); 
     $('#slide-'+this.id).slideToggle(500); 
     return false;   
    });

來源

2012-08-10 17:58:41

嗯，這個工程。但我想要的是單擊表格行。而不是行中的文本。 – Hardan 2012-08-13 08:12:08

@Hardan：親愛的，說實話，我看不出任何實質性的區別點擊一個錨（恕我直言，是最好的方式），並單擊錶行;現在，如果您無法控制內容，我可以和您一起使用這段巨大的js代碼;否則沒有理由這樣做。查看更新。 – 2012-08-13 11:24:06

有點你的代碼。謝謝。 – Hardan 2012-08-14 11:39:23

我編輯了一下JSFiddle。它對你有幫助嗎？

http://jsfiddle.net/NVx4S/7/

來源

2012-08-09 13:38:58 Thomas

首先謝謝你嘗試，但我想達到的是向上和向下滑動的效果。這隻有在你使用div包含td時纔有效。 – Hardan 2012-08-10 09:11:50

jQuery中的表格行切換

回答

相關問題