如何向表行添加折叠

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)，这意味着它会获得第3个tr并在之后的每个tr中添加display: none CSS由于nextAll()现在当我点击更多按钮时它会切换元素使用淡入淡出效果，无需编写新的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）。使用第二个表会导致列的宽度不同。此外，您只在父表的一个单元格中添加了第二个表。

以下是一个例子：

＆＃13;

＆＃13;

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

＆＃13;

table td,
table th {
  border: 1px solid black;
}

.more {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;