javascript - 点击展开表格行

第一个视图显示3行表。接下来，单击“ tfoot”行并展开其他行。

$('.table-toggle .show-row').slice(3).hide();
$('#show-price').click(function() {
  $('.table-toggle .show-row').show();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody class="table-toggle">
  <tr class="show-row">
    <td width="30%" id="dollar-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span> 1,00</td>
    <td width="30%" id="sell-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span></td>
    <td width="30%" id="dollar-price"></td>
    <td width="30%" id="sell-price"></td>
    <td width="20%" class="table-action">
      <button data-value="ripple" class="btn btn-sm btn-primary charge-btn st-btn"></button>
      <button data-value="ripple" class="btn btn-sm btn-warning ml-1 sell-btn st-btn"></button>
    </td>
  </tr>
</tbody>
<tfoot id="show-price" style="cursor: pointer">
  <tr>
    <th> ...</th>
  </tr>
</tfoot>

最佳答案

$('.table-toggle .show-row').slice(3).hide();
$('#show-price').data('hidden', true);
$('#show-price').click(function() {
  if ($(this).data('hidden')) {
    $('.table-toggle .show-row').show();
    $(this).data('hidden', false);
  } else {
    $('.table-toggle .show-row').slice(3).hide();
    $(this).data('hidden', true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody class="table-toggle">
    <tr class="show-row">
      <td width="30%" id="dollar-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span> 1,00</td>
      <td width="30%" id="sell-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span></td>
      <td width="30%" id="dollar-price"></td>
      <td width="30%" id="sell-price"></td>
      <td width="20%" class="table-action">
        <button data-value="ripple" class="btn btn-sm btn-primary charge-btn st-btn"></button>
        <button data-value="ripple" class="btn btn-sm btn-warning ml-1 sell-btn st-btn"></button>
      </td>
    </tr>
    <tr class="show-row">
      <td width="30%" id="dollar-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span> 1,00</td>
      <td width="30%" id="sell-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span></td>
      <td width="30%" id="dollar-price"></td>
      <td width="30%" id="sell-price"></td>
      <td width="20%" class="table-action">
        <button data-value="ripple" class="btn btn-sm btn-primary charge-btn st-btn"></button>
        <button data-value="ripple" class="btn btn-sm btn-warning ml-1 sell-btn st-btn"></button>
      </td>
    </tr>
    <tr class="show-row">
      <td width="30%" id="dollar-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span> 1,00</td>
      <td width="30%" id="sell-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span></td>
      <td width="30%" id="dollar-price"></td>
      <td width="30%" id="sell-price"></td>
      <td width="20%" class="table-action">
        <button data-value="ripple" class="btn btn-sm btn-primary charge-btn st-btn"></button>
        <button data-value="ripple" class="btn btn-sm btn-warning ml-1 sell-btn st-btn"></button>
      </td>
    </tr>
    <tr class="show-row">
      <td width="30%" id="dollar-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span> 1,00</td>
      <td width="30%" id="sell-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span></td>
      <td width="30%" id="dollar-price"></td>
      <td width="30%" id="sell-price"></td>
      <td width="20%" class="table-action">
        <button data-value="ripple" class="btn btn-sm btn-primary charge-btn st-btn"></button>
        <button data-value="ripple" class="btn btn-sm btn-warning ml-1 sell-btn st-btn"></button>
      </td>
    </tr>
    <tr class="show-row">
      <td width="30%" id="dollar-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span> 1,00</td>
      <td width="30%" id="sell-price"><span class="fa fa-arrows-alt-h" style="color: blue"></span></td>
      <td width="30%" id="dollar-price"></td>
      <td width="30%" id="sell-price"></td>
      <td width="20%" class="table-action">
        <button data-value="ripple" class="btn btn-sm btn-primary charge-btn st-btn"></button>
        <button data-value="ripple" class="btn btn-sm btn-warning ml-1 sell-btn st-btn"></button>
      </td>
    </tr>
  </tbody>
  <tfoot id="show-price" style="cursor: pointer">
    <tr>
      <th> Click to show/hide...</th>
    </tr>
  </tfoot>
</table>

关于javascript - 点击展开表格行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57476722/