隐藏新插入的所有行

Question

我的表格最初包含4行和（展开或折叠）按钮，请参见下图

当我最初点击（展开或折叠）按钮时，需要在行的中间插入新行，我使用下面的代码

 JQuery('#btnId').click(function() {
        var that = this;
        $("#example tbody tr").each(function(i, object) {                   
            $(object).after("<tr id=\"dispId\"><td>Full name:'"+i+"'</td><td></td></tr>")
        });
    });

结果如何

再次点击（展开或折叠）按钮，我需要隐藏插入中间的行。是否有办法使用Jquery或Javascript执行此操作？

Answer 1

这很简单。

1. 在添加之前将所有项目标记为新项目
2. 如果要隐藏它们，只需删除最后插入的行（标记为
）

以下是代码：

JQuery('#btnId').click(function() {
    var that = this;
    IF ($("newRow", "#example tbody").length = 0){ // add rows if no rows exists
        $("#example tbody tr").each(function(i, object) {                   
            $(object).after("<tr class="newRow" id=\"dispId\"><td>Full name:'"+i+"'</td><td></td></tr>")
        });
    } // remove rows if already exist
    else {
        $("newRow", "#example tbody").remove()
    }
});

Answer 2

您可以这样使用：

var inc = 0;
JQuery('#btnId').click(function() {
        var that = this;
        inc++;
        $("#example tbody tr").each(function(i, object) {                   
            $(object).after("<tr class=\"dispId\"><td>Full name:'"+i+"'</td><td></td></tr>")
            if(inc%2==0){//remove at every second click
               $('tr .dispId').eq(i).remove();
            }
        });
    });