Mettre à jour dynamiquement une table en utilisant javascript

Voici la démo . (Version simple)
NOUVEAU: voir le violon mis à jour (version avancée).

Disons que vous avez récupéré ces données JSON:

 var jsonData = [ { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' }, { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' }, { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' } ]; 

Et vous avez cette table:

 <table id="data-table"> <tr><td>There are no items...</td></tr> </table> 

Maintenant, vous avez besoin d'une méthode permettant d'analyser les valeurs dans un ordre et une présence personnalisables. Par exemple, si vous pouvez passer un tableau de champs à la fonction d'analyseur; Vous pouvez définir l'ordre des champs et laisser un champ ou deux si vous souhaitez:

 loadTable('data-table', ['field1', 'field2', 'field3'], jsonData); 

Notez que field4 n'est pas analysé.

La fonction loadTable boucle les éléments du tableau renvoyé et crée un <tr> avec chaque valeur de champ dans un <td> . Voici la fonction simple:

 function loadTable(tableId, fields, data) { //$('#' + tableId).empty(); //not really necessary var rows = ''; $.each(data, function(index, item) { var row = '<tr>'; $.each(fields, function(index, field) { row += '<td>' + item[field+''] + '</td>'; }); rows += row + '<tr>'; }); $('#' + tableId).html(rows); } 

METTRE À JOUR:

Ajout d'un support pour:

• En-têtes de tableaux
• Texte par défaut (pour la liste vide)
• Listes additionnelles
• Effacer la table
• etc…

Vous pouvez maintenant simplement inclure une table vide et la table dynamicTable prend soin du reste:

 <table id="data-table"></table> 

Appelez la méthode dynamicTable.config() pour configurer la table:

 var dt = dynamicTable.config('data-table', //id of the table ['field2', 'field1', 'field3'], //field names ['header 1', 'header 2', 'header 3'], //set to null for field names to be used as header names instead of custom headers 'There are no items to list...'); //default text for no items 

Puis appeler dt.load(data); Pour charger de nouvelles données (supprime la liste précédente s'il y en a une),
OU appeler dt.load(data, true); Pour ajouter les nouvelles données à la fin de la liste précédente.

Appel dt.clear(); La méthode va effacer la liste entière.

Violin mis à jour ici .

Vous pouvez effectuer une itération via vos objets JSON.

 $.each(JSON_Object, function(key, value) { // Write your code here }); 

Ensuite, vous pouvez simplement ajouter votre table avec des données.

 $('#yourTableName tr:last').after('<tr><td>John</td><td>$500</td></tr>'); 

Comme vous avez spécifiquement mentionné que vous n'avez pas besoin de bibliothèques tierces, vous pouvez faire quelque chose comme ci-dessus. Toutefois, si vous avez besoin d'un ensemble de données avec toutes les fonctionnalités, vous pouvez envisager un plugin comme http://datatables.net/ .