Javascript Jquery-如何显示按钮单击时隐藏的行

我有一个表，其中包含层次结构数据（父子层次结构）。有一个单击按钮，用户可以隐藏或显示与该特定父项相关的所有子项

我已经这样做了，但我正在进行ajax调用，以将孩子的相关内容带到家长，这只是通过单击按钮折叠起来的

有几种情况。不要在意第一个我做了这个

1）

当只显示根节点时：

然后我必须进行ajax调用，以使子节点与该根节点相关，并进一步

2）

但当显示所有层次结构列表时：

然后用户可以通过单击父节点按钮折叠所有子节点，但当用户展开子节点时，单击同一按钮，我不想进行ajax调用，因为我有这些子节点或行，或者我可以保持变量或其他方式

function getChildern(primaryId, isFlat, col) {
var id = event.target.id
var allChildern = null
if(!$(".id_"+event.target.id).hasClass('minus-symbol')){


    /*
    Note : here I want to check whether it's collapsed or it's a new thing
    if It's new make ajax request else build jquery code to show childs related to this parent which are just collapsed.
    */


    $(".id_"+event.target.id).removeClass('plus-symbol').addClass('minus-symbol')
    $.ajax({
        url : ("/getChildsDataRows"),
        type : "POST",
        data : {
            primaryId : primaryId
        },
        success : function(result) {
            var substr = result.data
            $.each(substr , function(i, val) { 
                // $(".id_"+id).show();
                 var suprSubstr = substr [i];
                 var tr = '<tr>' ;
                 $.each(suprSubstr , function(i, val) { 
                     tr += '<td>' + suprSubstr[i]  + '</td>';
                 });
                 tr += '</tr>'
                 $('table tr:nth-child(' + rowNumber + ')').after(tr);
                 //$(".id_"+event.target.id).removeClass('plus-symbol').addClass('minus-symbol')
            });
        }
     });
}else{
    $(".id_"+event.target.id).addClass('plus-symbol').removeClass('minus-symbol')
    allChildern = $(".parent_"+id).map(function() {
        $("#"+this.id).closest("tr").hide();
        return this.id
    }).get();

    if(allChildern == ''){
    }else{
        removeChildern(allChildern)
    }

    function removeChildern(allChildern){
        //alert(allChildern)
        $.each(allChildern , function(i, val) {
            $(".id_"+allChildern[i]).addClass('plus-symbol').removeClass('minus-symbol')
            var allSubChildern = null
            allSubChildern = $(".parent_"+allChildern[i]).map(function() {
                $("#"+this.id).closest("tr").hide();
                return this.id
            }).get();

            if(allSubChildern.length == 0){

            }else{
                removeChildern(allSubChildern)
            }//$("#"+allChildern[i]).closest("tr").hide();
        });

    }   
  }
 }
}

函数getChildern（primaryId、isFlat、col）{ var id=event.target.id var allChildern=null if（！$（“.id\u”+event.target.id）.hasClass（'减号'））{ /* 注意：这里我想检查它是折叠的还是新的 如果是新的makeajax请求，则构建jquery代码，以显示与此父级相关的、刚刚折叠的子级。 */ $（“.id_”+event.target.id）.removeClass（'plus-symbol'）.addClass（'减号'）） $.ajax({ url:（“/getChildsDataRows”）， 类型：“POST”， 数据：{ primaryId：primaryId }, 成功：功能（结果）{ var substr=result.data $.each（substr，function（i，val）{ //$（“.id_”+id.show（）； var suprSubstr=substr[i]； var tr=''； $.each（suprSubstr，function（i，val）{ tr+=''+suprSubstr[i]+''； }); tr+='' $（'table tr:nth child（'+rowNumber+'））。在（tr）之后； //$（“.id_”+event.target.id）.removeClass（'plus-symbol'）.addClass（'减号'）） }); } }); }否则{ $（“.id_”+event.target.id）.addClass（'plus-symbol'）.removeClass（'plus-symbol'）） allChildern=$（“.parent_uquo+id）.map（函数（）{ $（“#”+this.id）.closest（“tr”）.hide（）； 把这个还给我 }).get（）； 如果（所有儿童=“”）{ }否则{ removeChildern（所有儿童） } 函数removeChildern（所有儿童）{ //警报（所有儿童） $.each（所有子项，函数（i，val）{ $（“.id_”+allChildern[i]）.addClass（'plus-symbol'）.removeClass（'plus-symbol'）） var allSubChildern=null allSubChildern=$（“.parent_u”+allChildern[i]）.map（函数（）{ $（“#”+this.id）.closest（“tr”）.hide（）； 把这个还给我 }).get（）； if（allSubChildern.length==0）{ }否则{ removeChildern（所有子Childern） }//$（“#”+allChildern[i]）.closest（“tr”）.hide（）； }); } } } } 下面是DOM结构

<a onclick="getChildern('1','false','UniqueId')" title="View"><i class="minus-symbol id_1 parent_0" style="height:10px;margin-left:1px;" id="1"> </i></a>

---

根据我们的讨论，我正在更新代码

if($("#data-grid-table-tree tbody tr").length > 0){
  // children already exist. no need for ajax call, just show the children
}else{
  // children doesnt exists. make a call.
}

---

在ajax调用之前，您可以发布生成的html DOM结构吗？您应该检查子对象是否存在。若并没有，那个么调用ajax并显示它们，否则就显示它们。我可以读取隐藏表行吗？当然可以。它们只是隐藏在dom中，但存在于dom中。@Atikurahman不在else块中。我试着检查这个问题的答案，我试过了，但不起作用。隐藏的行将不会被删除。我认为您对

“.id\u”+event.target.id

有问题。这不是正确的DOM。请使用

”。删除孩子时使用相同的父项\+id

。请制作小提琴。非常感谢。

allChildern = $(".parent_"+id).map(function() {
$("#"+this.id).closest("tr").show();
return this.id
}).get();

if(allChildern == ''){
  // make ajax call

}else{
showChildern(allChildern)
clickable=true
}

function showChildern(allChildern){
//alert(allChildern)
$.each(allChildern , function(i, val) {
    $(".id_"+allChildern[i]).addClass('plus-symbol').removeClass('minus-symbol')
    var allSubChildern = null
    allSubChildern = $(".parent_"+allChildern[i]).map(function() {
        $("#"+this.id).closest("tr").show();
        return this.id
    }).get();

    if(allSubChildern.length == 0){

    }else{
        showChildern(allSubChildern)
    }//$("#"+allChildern[i]).closest("tr").show();
   });

  }