Ajouter des lignes à une table avec jQuery

J’ai un tableau HTML composé de 5 colonnes. Au-dessus du tableau HTML, il existe une zone de texte appelée “HowManyRows” dans laquelle l’utilisateur peut entrer le nombre de lignes qu’il souhaite append au tableau. Les lignes sont réellement ajoutées lorsque “Ajouter une ligne!” le bouton est cliqué.

Je pensais que la meilleure façon de créer cette fonctionnalité serait d’utiliser une boucle for, mais après avoir navigué sur Internet, les gens ont dit qu’ils utilisaient la méthode jQuery .each . J’ai essayé cela, mais cela ne fonctionne pas comme souhaité. Il ajoute simplement une ligne à la table, quel que soit le nombre dans “HowManyRows”. Quelqu’un peut-il corriger où je me suis trompé s’il vous plaît?

Voici mon HTML:

       Milk Coffee Tea     1 sugar 2 sugar 3 sugar

Voici mon jQuery:

 $(document).ready(function () { $('#btnAdd').click(function () { $('#HowManyRows').each(function(index) { $('#FirstRow').clone().appendTo('#MainTable'); }); }); });

J’ai créé une démo sur JSFiddle ici .

Voici:

  $(document).ready(function () { $('#btnAdd').click(function () { var count = parseInt($('#HowManyRows').val()), first_row = $('#FirstRow'); while(count-- > 0) first_row.clone().appendTo('#MainTable'); }); });

Fiddle: http://jsfiddle.net/iambriansreed/QWpdr/

.each() ne semble pas utile ici, car il est généralement utilisé pour effectuer une itération sur une collection d’éléments sélectionnés par jQuery. Une simple boucle fonctionnerait :

 $('#btnAdd').click(function () { var n = parseInt($('#HowManyRows').val(), 10); var original = $('#FirstRow'); for (var i = 0; i < n; i++) { original.clone().appendTo('#MainTable'); } });

L’utilisation de la méthode jQuery .clone () comme d’autres l’ont suggéré n’est pas recommandée dans cette situation, conformément à la documentation jQuery:

Utiliser .clone () a pour effet secondaire de produire des éléments avec des atsortingbuts id en double, supposés être uniques. Dans la mesure du possible, il est recommandé d’éviter de cloner des éléments avec cet atsortingbut ou d’utiliser plutôt des atsortingbuts de classe comme identificateurs.

Sans parler du fait que la méthode suggérée pour effectuer une boucle dans les appels .appendTo () obligera le client à restituer chaque itération. Je suggère ce qui suit:

Créez une constante qui correspond à votre modèle de ligne:

 var row = [''];

Vous pouvez également omettre l’identifiant dans la variable de ligne et n’avoir qu’une seule grosse chaîne si chaque ligne n’a pas besoin d’un identifiant unique. Vous continuez ensuite avec:

 $('#btnAdd').click(function () { var i = parseInt($('#HowManyRows').val(), 10); var cnt = i; var rowCnt = $('#MainTable').children().length; var rows = []; while(i--) { row[1] = 'row' + (rowCnt + cnt - i); rows.push(row.join()); // or just row if not using the id } $('#MainTable').append(rows.join()); }

De cette façon, nous n’avons qu’un ajout ponctuel au DOM, et l’élément chaîne vide de notre variable de row est remplacé par un identifiant unique et prévisible.

 $(document).ready(function () { var $howMany = $('#HowManyRows'), $firstRow = $('#FirstRow'); $('#btnAdd').click(function () { var numRows = parseInt($howMany.val(), 10) || 1; //default to 1 for (var i = 0; i < numRows; i++){ $firstRow.clone().appendTo('#MainTable'); } }); });

each itère sur les éléments de l’object jQuery auquel il est appelé, donc ceci:

 $('#HowManyRows').each(...);

n’exécute qu’une seule itération, car $('#HowManyRows') ne contient qu’un seul élément.

Dans votre cas, une boucle est parfaitement acceptable.

 var howMany = parseInt($('#HowManyRows').val(), 10); while (howMany-- > 0) { // Add a row... }