使用JQuery限制動態添加的錶行的數量

Question

我使用clone動態地將一行插入到使用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

您可以隨時簡單地爲每個表使用一個變量來跟蹤添加的行數。

或者另一種選擇是使用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 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

變量怎麼樣？

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

或者，您也可以在用戶添加的類上設置不同的類，然後在添加函數中對它們進行計數。

Answer 4

您也可以使用數據屬性在桌子上

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

然後，只需檢查以確保我小於允許量

Answer 5

謝謝您援助，但我找到了一個訣竅的JQuery插件。它在這裏...

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