javascript - 如何向表格行添加折叠

Question

我的页面中有一个表格，但不想一次显示整个表格。相反，我想默认只显示 3 行。然后，当用户单击“更多”按钮时，我想显示所有行。

我尝试使用下面的代码来完成此任务，但遇到了渲染问题。是否有可能在 html 中向表格行添加折叠？

<table class="table table-striped">
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>abcde</td>
    </tr>
    <tr>
        <td>2</td>
        <td>bcdef</td>
    </tr>
    <tr>
        <td>3</td>
        <td>cdefg
            <span class="more clickable" data-toggle="collapse" data-target="#remaining-data">more
            </span>
        </td>
    </tr>
    <table class="collapse table table-stripped" id="remaining-data">
         <tr>
             <td>4</td>
             <td>defgh</td>
         </tr>
         <tr>
             <td>5</td>
             <td>efghi</td>  
         </tr>
    </table>
<table>

Answer 1

我使用了nth-child(4)，这意味着它将获得第三个tr，并由于nextAll而将display: none CSS添加到此后的每个tr中() 现在，当我单击“更多”按钮时，它将切换具有淡入淡出效果的元素，无需编写新的 table 或 tbody

$(function(){
    $("table tr:nth-child(4)").nextAll().css("display","none");

    $(".clickable").on("click", function(){
        $("table tr:nth-child(4)").nextAll().fadeToggle();
    })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>abcde</td>
    </tr>
    <tr>
        <td>2</td>
        <td>bcdef</td>
    </tr>
    <tr>
        <td>3</td>
        <td>cdefg
            <span class="more clickable btn btn-sm pull-right btn-link">more
            </span>
        </td>
    </tr>
    <tr>
         <td>4</td>
         <td>defgh</td>
     </tr>
     <tr>
         <td>5</td>
         <td>efghi</td>  
     </tr>
<table>