通過按鈕展開和摺疊行

Question

是否可以通過按鈕展開和摺疊表中的最後2行？ 當頁面加載這些行必須被隱藏。

這裏是表：

<table class="table"> 
      <thead> 
      <tr> 
     <th style="background: #00A000; color: #fff;">Match Schedule</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr id="1"> 
     <td class="active">asd<br><p class="" style="color: red;">- Start 15 Aug 2015 21:00</p1></td> 
      </tr> 
      <tr> 
     <td class="danger">asd<br><p class="" style="color: red;"> - Start 15 Aug 2015 21:00</td> 
      </tr> 
      <tr> 
     <td class="active">asd<br><p class="" style="color: red;"> - Start 15 Aug 2015 21:00</td> 
      </tr> 
      <tr> 
     <td class="danger">asd<br><p class="" style="color: red;"> - Start 15 Aug 2015 21:00</td> 
      </tr> 
      <tr> 
     <td class="active">asd<br><p class="" style="color: red;"> - Start 15 Aug 2015 21:00</td> 
      </tr> 
      <tr> 
     <td class="danger">asd<br><p class="" style="color: red;"> - Start 15 Aug 2015 21:00</td> 
      </tr> 
      <tbody> 
      </table> 

Answer 1

根據您當前的標記，你可以

1. 選擇使用 tbody tr:nth-last-child(-n+2)然後
2. 使用toggleClass的類之間進行切換的最後兩個元素定義爲隱藏和顯示它。

$('button').on('click', function() { 
 
    $('tbody tr:nth-last-child(-n+2)').toggleClass("display"); 
 
});

tbody tr:nth-last-child(-n+2) { 
 
    display: none; 
 
} 
 

 
.display { 
 
    display: block !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th style="background: #00A000; color: #fff;">Match Schedule</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="1"> 
 
     <td class="active">asd 
 
     <br> 
 
     <p class="" style="color: red;">- Start 15 Aug 2015 21:00</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="danger">asd 
 
     <br> 
 
     <p class="" style="color: red;">- Start 15 Aug 2015 21:00</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="active">asd 
 
     <br> 
 
     <p class="" style="color: red;">- Start 15 Aug 2015 21:00</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="danger">asd 
 
     <br> 
 
     <p class="" style="color: red;">- Start 15 Aug 2015 21:00</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="active">asd 
 
     <br> 
 
     <p class="" style="color: red;">- Start 15 Aug 2015 21:00</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="danger">asd 
 
     <br> 
 
     <p class="" style="color: red;">- Start 15 Aug 2015 21:00</p> 
 
     </td> 
 
    </tr> 
 
    <tbody> 
 
</table> 
 

 
<button>Press me</button>

Answer 2

你可以使用自舉的崩潰功能，以包裹在一個div最後兩行和控制是通過一個按鈕。

更多信息：http://getbootstrap.com/javascript/#collapse