Limite du nombre de lignes de table ajoutées dynamiquement à l'aide de JQuery

Question

J'insère dynamiquement une ligne dans une table avec JQuery à l'aide de clone.

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

}); 

L'utilisateur final contrôlera l'insertion de nouvelles lignes. Je dois limiter le nombre de nouvelles lignes à 5. Y at-il un moyen de le faire avec un cookie ou une autre méthode (tableau). Je pourrais avoir plusieurs tables avec son identifiant unique, donc il doit travailler avec plusieurs tables sur la page.

J'espère que vous pouvez aider.

Answer 1

Vous pouvez toujours utiliser simplement une variable pour chaque table pour suivre le nombre de lignes ajoutées.

Ou une autre alternative serait d'utiliser la méthode data() de jQuery qui vous permet de stocker directement des données dans un élément dom. L'événement click trouve sa table et met à jour les données de la table() chaque fois qu'une ligne est ajoutée, et empêche d'autres ajouts quand il atteint le maximum.

EDIT: Code corrigé avec vérification pour voir si le compte n'est pas défini et pour supprimer les parenthèses mal placées.

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

Vous pouvez simplement compter le nombre d'éléments renvoyés.

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

Ou, vous pouvez ajouter une classe spéciale aux lignes ajoutées par l'utilisateur.

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

Answer 3

Que diriez-vous d'une variable? Alternativement, vous pouvez également définir une classe différente sur celles ajoutées par l'utilisateur, puis les compter simplement dans votre fonction d'ajout.

Answer 4

Vous pouvez également utiliser l'attribut de données sur la table

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

vérifier Ensuite, il suffit de vous assurer que le i est inférieur au montant autorisé

Answer 5

Merci pour votre assistance mais j'ai trouvé un plugin JQuery qui fait l'affaire. Il est ici ...

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