javascript - 通过按钮展开和折叠行

是否可以通过按钮展开和折叠表中的最后两行？
当页面加载时，必须隐藏这些行。
这是桌子：

<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>

最佳答案

根据您当前的标记，您可以
使用选择最后两个元素
tbody tr:nth-last-child(-n+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>