Question

我使用克隆动态地在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的表，因此需要在页面上使用多个表。

希望你能提供帮助。

Answer 1

变量怎么样？

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

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

Answer 2

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

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

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

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

Answer 3

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

或者另一种选择是使用jQuery的data（）方法，它允许您直接在dom元素中存储数据。 click事件将找到它的表，并在每次添加行时更新表的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);
    }
});

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

Answer 4

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

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

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

Answer 5

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

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

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

5 个答案: