通过按钮展开和折叠行

debugcn 发表于 Dev

伊万·迪米特洛夫（Ivan Dimitrov）

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

这是表格：

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

m4n0

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。