隐藏新插入的所有行

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>")
        });
    });

结果是

​

同样，如果单击(展开或折叠)按钮，我需要隐藏插入到middle.Is中的行--使用Jquery或Javascript？

Answer 1

你可以这样使用：

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();
            }
        });
    });

Answer 2

这相当简单。

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()
    }
});