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

How to add dynamic fields using a counter to limit the number of fields in jQuery

本文关键字：字段 jQuery 何使用 计数器 添加 动态      更新时间：2023-09-26

这是小提琴链接

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

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

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

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

您还可以获取一个计数器变量并进行如下检查：-

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

这里是参考链接

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