javascript - 如何使用计数器添加动态字段以限制jQuery中的字段数

Question

这是小提琴链接

http://jsfiddle.net/gKJEs/80/

我需要一个计数器来停止添加的行数。让我们说直到5点。

HTML：

<table id="table"></table>
<button id="addRowBtn">Add Row</button>

脚本：

$(function () {    
    var tbl = $("#table");    
    $("#addRowBtn").click(function () {    
        $("<tr class='tre'><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td><button class='delRowBtn'>Delete</button></td></tr>").appendTo(tbl);      
    });

    $('#sd').click(function () {
        $('.tre').hide();
    });

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

});

Answer 1

I have fixed it and updted fiddle kindly see http://jsfiddle.net/gKJEs/85/

enter code here$(function(){

var tbl = $("#table");
var numRows = 0;
$("#addRowBtn").click(function(){
    if(numRows<5){
    $("<tr class='tre'><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td><button class='delRowBtn'>Delete</button></td></tr>").appendTo(tbl);  
numRows++;
   }        
});
   $('#sd').click(function(){
       $('.tre').hide();
   });

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

});

Answer 2

嘿，看看它是否适合你，我添加了一个计数器来检查具有相同类的行。

   var numItems = jQuery('.tre').length
   if(numItems <5){  
     //add row
   } 

http://jsfiddle.net/gKJEs/84/

Answer 3

您还可以使用一个计数器变量并像这样检查：-

if(counter>5){
        alert("Only 5 fields allow");
        return false;
}   

这是参考链接