Question

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

这是表格：

<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

根据您当前的标记，您可以

使用选择最后两个元素 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>

Answer 2

您可以使用bootstrap的折叠功能将div中的最后两行包装起来，并通过按钮进行控制。

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

通过按钮展开和折叠行

2 个答案: