0

这是我的小提琴 http://jsfiddle.net/ZUDLH/8/

这是代码。

<table id="table"></table>
<input type="button" id="addRowBtn" style="border-style: none;  cursor: pointer; 
                                                            background: #FFFFFF; color:  #023a6d;" value="Add Search Field">

<input style="display: none; margin-right: 552px; margin-left: 10px; float:  left;background:#00c800; border: 1px solid #00c800; color:#FFF; font-size: 14px;" type="button" id="delall" value="Clear">


$(document).ready(function () { 
$(function(){

var tbl = $("#table");

$("#addRowBtn").click(function(){
   if($("tr.tre").length<5)
       $("<tr class='tre'><td><select ><option>AND</option><option>OR</option> <option>NOT</option></select></td><td><input type='text' /></<td><td>&nbsp;in&nbsp;</td><td><select><option>title</option><option>All Fields</option><option>Authors</option></select></td><td><a class='delRowBtn'><input type='button' value='delete'></a></td></tr>").appendTo(tbl);  
    if($("tr.tre").length>2){
        $('#delall').show();
    } 


});


 $('#delall').click(function(){
      $(".tre").remove(); 
      $('#delall').hide();
   });

$(document.body).delegate(".delRowBtn", "click", function(){
    $(this).closest("tr").remove();        
  }); 

 });
 });

当我点击add search时，字段行将被动态添加到 5 行（有限）。当行数超过两行时，将出现清除按钮。

现在，当我尝试一一删除行时，它们将被删除。问题是当我尝试一一删除行直到最后。清除按钮应该会自动隐藏，但事实并非如此。

请帮忙。

4

4 回答 4

1

尝试这个：

$(document.body).delegate(".delRowBtn", "click", function(){
        $(this).closest("tr").remove();
        if($("tr.tre").length<3){
            $('#delall').hide();
        }
    });

FIDDLE

于 2013-08-30T04:33:11.763 回答
0

像这样更新您的删除按钮事件-

$(document.body).delegate(".delRowBtn", "click", function(){
        $(this).closest("tr").remove();  

        //hide clear button        
        if($("tr.tre").length<3){
            $('#delall').hide();
        }
    });
于 2013-08-30T04:33:19.307 回答
0

只需添加一个 if 条件

$(document.body).delegate(".delRowBtn", "click", function(){

    $(this).closest("tr").remove();        
    if($('#table tr').length == 0){ // your table rows if 0 then clear button disabled
     $('#delall').hide();
    };
});
于 2013-08-30T04:41:50.357 回答
0

我建议这个

$('#delall').toggle($("tr.tre").length>2)
于 2013-08-30T06:33:22.407 回答