通过按钮展开和折叠行

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