如何向表格行添加折叠

debugcn 发表于 Dev

喜玛宾杜

我的页面中有一个表格，不想一次显示整个表格。相反，我想默认只显示 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>

普拉蒂克·达尔吉

我已经使用nth-child(4)这意味着它将获得第 3 个 tr 并将display: noneCSS添加到每个 tr 之后，因为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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。