点击展开表格行

Question

第一个视图显示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>