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

【问题标题】：Limit number of dynamically added Table Rows using JQuery使用 JQuery 限制动态添加的表行数
【发布时间】：2016-10-23 06:50:23
【问题描述】：

我正在使用克隆将一行动态插入到带有 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 的表，因此它需要与页面上的多个表一起使用。

希望你能帮忙。

【问题讨论】：

标签： jquery html-table clone rows

【解决方案1】：

变量呢？

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

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

【讨论】：

【解决方案2】：

您总是可以简单地为每个表使用一个变量来跟踪添加的行数。

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

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

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

http://api.jquery.com/data/

【讨论】：

我喜欢JQuery数据方式；但是单击不会插入新行。 currentCount 引发了 undefiend 错误。会不会是 $(btn)？
@Rob - 我更新了代码以添加一个 if 语句来检查数据元素 'theCount' 是否已定义（如果没有，则将其初始化为 0）。我还在一个地方输入了 $(btn) 而不是 $btn。现在应该可以工作了。
我有一个使用 jquery.validate 插件验证的文本框。原始行中的文本框已验证，但克隆行未验证？你知道我怎样才能让插件在克隆的文本框或其他输入上工作吗？
@Rob - 我对验证插件不太熟悉。可能最好开始一个新问题并询问为什么克隆的表单元素没有得到验证。

【解决方案3】：

你可以只计算返回的元素数量。

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

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

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

【讨论】：

【解决方案4】：

你也可以使用表格的数据属性

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

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

【讨论】：

Patrick 的 sn-p 遇到了同样的问题。 i 未定义。

【解决方案5】：

感谢您的帮助，但我找到了一个可以解决问题的 JQuery 插件。就在这里……

http://cloudgen.w0ng.hk/jquery/table.addrow.php

【讨论】：