javascript - 单击展开表格行

Question

第一个 View 显示表的 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>

Answer 1

$('.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>