Comment ajouter des lignes au tableau dans jquery

Aujourd'hui, voyons comment ajouter des lignes à un tableau à l'aide de jQuery. Si vous êtes un développeur Web, vous devez savoir que la présentation des données sur la page est importante. Le tableau est un très bon moyen de présenter des données. Pour utiliser des tableaux pour afficher des données, vous devez savoir comment utiliser jQuery pour ajouter dynamiquement des lignes.

Voyons comment ajouter des lignes à un tableau à l'aide de jQuery.

La première étape consiste à obtenir l'objet table. Si vous avez déjà un objet table, il vous suffit d'utiliser la ligne de code suivante dans jQuery pour l'obtenir :

var table = $('table');

Si vous n'avez pas d'objet table, alors vous devez utiliser la ligne de code suivante pour créer une table object :

var table = $('<table></table>');

La deuxième étape consiste à créer un objet ligne. Pour créer un objet ligne, vous devez utiliser la ligne de code suivante :

var row = $('<tr></tr>');

La troisième étape consiste à créer l'objet cellule. Pour ajouter une cellule à une ligne, vous devez utiliser la ligne de code suivante :

var cell = $('<td></td>');

La quatrième étape consiste à ajouter l'objet cellule à l'objet ligne.

row.append(cell);

La cinquième étape consiste à ajouter l'objet ligne à l'objet table.

table.append(row);

Maintenant, vous avez fini d'ajouter une rangée de cellules au tableau.

Cependant, dans une application réelle, vous devez ajouter plusieurs cellules à chaque ligne du tableau, et peut-être que chaque cellule a des données et des styles différents. Dans ce cas, vous devez utiliser une boucle for pour créer un tableau complet. Examinons ensuite le code complet :

var data = [
    {name: 'John', age: 30},
    {name: 'Jane', age: 28},
    {name: 'Bob', age: 35},
    {name: 'Mary', age: 29}
];

var table = $('<table></table>');
    
for(var i = 0; i < data.length; i++){
    var row = $('<tr></tr>');
    var name = $('').text(data[i].name);
    var age = $('').text(data[i].age);
        
    row.append(name).append(age);
    table.append(row);    
}

$('#tableWrapper').empty().append(table);

Ce code utilise une boucle for pour parcourir une liste de données et utilise la méthode text() pour ajouter du texte à la cellule. Enfin, utilisez la méthode empty() pour effacer le contenu de l'élément #tableWrapper et utilisez la méthode append() pour y ajouter l'objet table, complétant ainsi la construction de la table entière.

Résumé :

Dans cet article, nous avons appris comment ajouter une ou plusieurs lignes à un tableau à l'aide de jQuery. C'est une technique très utile, surtout lorsque vous devez ajouter des données dynamiques à la page. Maintenant que vous savez comment ajouter des lignes à une table jQuery, essayez-le !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!