Question

这是小提琴链接

我需要一个计数器来停止添加的行数。让我们说直到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

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

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

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

Answer 2

你也可以拿一个计数器变量并检查如下： -

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

Here is reference link

Answer 3

我已修复它并更新了小提琴，请参阅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--;        
}); 

});

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

3 个答案: