Javascript jQuery表视图更多/更少功能

jQuery

我需要在单击“查看更多”时显示所有表格行，在显示所有行后，需要将按钮文本更改为“查看较少”，在单击“查看较少表格”后，转到其默认状态，并将按钮文本更改为“查看更多”。同样的功能会再次重复

        $('table tr:lt(4)').addClass('active');
        var rowCount = $('table tr').length;
        $('a.load_more').on('click', function(e) {
            e.preventDefault();  
            var $rows = $('table tr');
            var lastActiveIndex = $rows.filter('.active:last').index();
            $rows.filter(':lt(' + (lastActiveIndex + rowCount) + ')').addClass('active');
            if ($rows.filter(':hidden').length === 0) {
                $(this).html('view less').on('click', function () {
                    $rows.filter(':lt(' + (lastActiveIndex + rowCount) + ')').removeClass('active');
                    $('table tr:lt(4)').addClass('active');
                });
            }
             
        });

**CSS**
table tr { display: none; }
table tr.active { display: table-row; }

HTML 这是HTML表需要执行的功能

<table>
        <thead>
            <th>head 1</th>
            <th>head 2</th>
            <th>head 3</th>
            <th>head 4</th>
        </thead>
            <tbody>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>last row</td>
                    <td>last row</td>
                    <td>last row</td>
                    <td>last row</td>
                </tr>
            </tbody>
    </table>
    <a href="#" class="load_more">View More</a>

总目1
总目2
总目3
总目4
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
最后一排
最后一排
最后一排
最后一排

当

$rows.filter（':hidden'）时，您可以简单地从所有TR中删除
活动的
类。长度
为0，只将活动添加到第一个
4
TR，否则也将活动类添加到其他TR

演示代码：


$（'table tr:lt（4）'）.addClass（'active'）；
var rowCount=$（'table tr'）。长度；
$（'a.load_more'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var$rows=$（'table tr'）；
var lastActiveIndex=$rows.filter（'.active:last'）.index（）；
if（$rows.filter（':hidden'）。长度==0）{
$rows.removeClass（'active'）//删除所有活动
$（this.html（'View More'）//更改html
$（'table tr:lt（4）'）.addClass（'active'）；//添加类
}否则{
$（this.html（'view less'））
$rows.filter（':lt（+（lastActiveIndex+rowCount）+'））.addClass（'active'）；
}
});
表tr{
显示：无；
}
表tr.active{
显示：表格行；
}

总目1
总目2
总目3
总目4
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
最后一排
最后一排
最后一排
最后一排
下面是一个使用触发器语句的简单解决方案


var originalLength=4；//原始长度=4
$（'table tr:lt（'+originalLength+'））.addClass（'active'）；
var rowCount=$（'table tr'）。长度；
var hidden=true；
变量$table=$（'table'）。查找（'tbody'）；
$（'a.load_more'）。在（'click'，函数（e）上{
e、 预防默认值（）；
如果（隐藏）{
//首先单击，它是隐藏的，所以展开
$table.find（'tr:lt（'+rowCount+'））.hide（）；
$table.find（'tr:lt（'+rowCount+'））.show（）；
$（this.html（'View less'）//更改html
}否则{
$table.find（'tr:lt（'+rowCount+'））.hide（）；
$table.find（'tr:lt（+（originalLength-1）+'））.show（）；
$（this.html（'View More'）//更改html
}
隐藏=！隐藏；
});
表tr{display:none；}
table tr.active{显示：表行；}

总目1
总目2
总目3
总目4
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
最后一排
最后一排
最后一排
最后一排
非常感谢Swati。代码完全按照我想要的方式工作。你真是个天才，谢谢你的帮助。我可以创建函数并将这些代码放入该函数并应用于不同的id吗？。