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

问题描述：

我使用clone动态地将一行插入到使用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，因此它需要与页面上的多个表一起工作。

希望你能帮上忙。

答

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

或者另一种选择是使用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/

我喜欢JQuery数据方法;但点击不会插入新行。 currentCount引发了一个undefiend错误。它可能是$（btn）？ – Rob 2010-02-03 18:17:53

@Rob - 我更新了代码以添加if语句来检查数据元素'theCount'是否已被定义（如果不是，则将其初始化为0）。我还在一个地方输入了$（btn），而不是$ btn。现在应该工作。 – user113716 2010-02-03 18:59:28

我有一个使用jquery.validate插件进行验证的文本框。原始行中的文本框经过验证，但克隆的行不是？你知道如何让插件在克隆的文本框或其他输入上工作吗？ – Rob 2010-02-17 18:43:13

答

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

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

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

答

您也可以使用数据属性在桌子上

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

然后，只需检查以确保我小于允许量

同样的问题，我得到帕特里克的片段。我没有定义。 – Rob 2010-02-03 18:26:16

答

谢谢您援助，但我找到了一个诀窍的JQuery插件。它在这里...

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

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

相关推荐