使用JQuery限制动态添加的表行数

我使用克隆将一行动态插入JQuery表中

$('#Clone').click(function() {

    //put jquery this context into a var
    var $btn = $(this).parent();

    //use .closest() to navigate from the buttno to the closest row and clone it
    //use clone(true) to pass events to cloned item

    var $clonedRow = $btn.closest('tr').clone(true).insertAfter($btn);  

});

最终用户将控制新行的插入。我需要将新行数限制为5行。有没有一种方法可以通过cookie或其他方法（数组）实现这一点。我可以有多个具有唯一id的表，因此它需要在页面上处理多个表

---

希望您能提供帮助。

您可以计算返回的元素数

function countRows() {
  return $("#table-id tr").length + $("#table2-id tr").length; // etc, for all table ID's.
}

或者，您可以向用户添加的行添加一个特殊类

function countRows() {
  return $("tr.new").length;
}

变量呢

function addClick(identifier, max){
  var i = 0;
  $(identifier).click(function() {
    if (i < max){
       //add row
       i++;
    } 
  }
}
addClick("#Clone", 5);

函数addClick（标识符，最大值）{
var i=0；
$（标识符）。单击（函数（）{
如果（i

---

或者，您也可以在用户添加的行上设置不同的类，然后在add函数中对它们进行计数。

您可以对每个表使用一个变量来跟踪添加的行数

function countRows() {
  return $("tr.new").length;
}

或者另一种选择是使用jQuery的data（）方法，该方法允许您直接将数据存储在dom元素中。单击事件将找到其表，并在每次添加行时更新表的data（），并在达到最大值时阻止进一步添加

编辑：更正代码，检查计数是否未定义，并删除错误放置的括号

$('#Clone').click(function() {
    var $btn = $(this).parent();
    if($btn.closest('table').data('theCount') == undefined) {
        $btn.closest('table').data('theCount', 0)
    }
    var currentCount = $btn.closest('table').data('theCount');

    if(currentCount < 5) {
        $btn.closest('tr').clone(true).insertAfter($btn);
        $btn.closest('table').data('theCount', currentCount + 1);
    }
});

$（“#克隆”）。单击（函数（）{
var$btn=$（this.parent（）；
如果（$btn.closest（'table'）。数据（'theCount'）==未定义）{
$btn.closest（'table'）。数据（'theCount'，0）
}
var currentCount=$btn.closest（'table'）。data（'theCount'）；
如果（当前计数<5）{
$btn.Close（'tr'）.clone（true）.insertAfter（$btn）；
$btn.closest（'table'）。数据（'theCount'，currentCount+1）；
}
});

---

您还可以使用表上的数据属性

   var i = $('#tableID').data('userAddedRows');//of course you need to check there is a value and such
   i++;
   $('#tableID').data('userAddedRows',i);

---

然后检查以确保i小于允许的数量

谢谢您的帮助，但我发现了一个JQuery插件可以实现这一点。它就在这里

---

我喜欢JQuery数据方法；但是单击并没有插入新行。currentCount引发了一个未定义的错误。它可能是$（btn）？@Rob-我已经更新了代码，添加了一个if语句，以检查数据元素“theCount”是否已定义（如果未定义，则将其初始化为0）。我还键入了$（btn）在一个地方，而不是$btn。现在应该可以工作了。我有一个文本框，它是通过jquery.validate插件验证的。原始行中的文本框是经过验证的，但克隆行不是？你知道我如何让插件在克隆的文本框或其他输入上工作吗？@Rob-我对验证插件不太熟悉。可能最好开始一个测试新问题，并询问为什么克隆的表单元素没有得到验证。与Patrick的代码片段遇到的问题相同。我未定义。