如何向表行添加折叠

Question

我的页面中有一张桌子，不想一次显示整个桌子。 相反，我希望默认情况下仅显示3行。 然后，当用户单击more按钮时，我要显示所有行。

我尝试使用下面的代码来实现这一点，但是出现了渲染问题。 有没有可能将折叠添加到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并添加display: none由于nextAll()之后，每个tr display: none CSS。现在，当我单击更多按钮时，它将切换具有淡入淡出效果的元素，无需写新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> 

Answer 2

不要使用第二张表，而是使用<tbody>元素将多行包装在一起。 这些<tbody>元素可以在同一表中多次使用（请参阅link ）。 使用第二个表会导致列的宽度不同。 此外，您在父表的仅一个单元格内添加了第二个表。

这是一个例子：

 document.querySelector('.more').addEventListener('click', function() { document.querySelector('.initially-hidden-rows').classList.remove('hidden'); }); 

 table td, table th { border: 1px solid black; } .more { color: blue; cursor: pointer; text-decoration: underline; } .hidden { display: none; } 

 <table> <tbody class="initial-rows"> <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 <a class="more">more</a> </td> </tr> </tbody> <tbody class="initially-hidden-rows hidden"> <tr> <td>4</td> <td>defgh</td> </tr> <tr> <td>5</td> <td>efghi</td> </tr> </tbody> <table>