Création d'une table dynamique à l'aide de jQuery

Question

Quelle est la meilleure façon de créer des tables dynamiques à partir de zéro dans jQuery, puis de les remplir avec des données.

EDIT:

On suppose les données proviennent d'un service de script et je dois créer une table dynamique et les remplir avec les valeurs entrantes

Answer 1

DataTables est une table jQuery riche en fonctionnalités plug-in. Sans connaître la fonctionnalité requise par votre application, il est difficile de faire des recommandations parfaites, cependant.

Answer 2

Il existe plusieurs façons d'accomplir la création réelle de la table sans plugins. Par exemple:

$('body').append('<table id="myTable"></table>'); 

Vous pouvez ensuite utiliser .append pour ajouter des en-têtes de table et de lignes en appelant l'identifiant de la table. L'utilisation de .html vous permettra de remplir la table. Ecriture dans une fermeture pour éviter les variables globales.

Answer 3

Vous pouvez déplacer le code hors de la fermeture (première et dernière lignes) lorsque vous le placez dans votre application.

L'affectation de la table à une variable aide puisque vous avez une ressource à manipuler plus tard, au lieu de requérir ce qui peut être taxé. myTable est un objet jQuery, d'où l'exemple de l'appel html(), qui va ajouter les balises <thead> et <tbody> à votre élément de table. Notez également que lorsque vous manipulez le contenu interne d'un élément, il est toujours préférable d'envelopper tout votre contenu à l'intérieur avec le moins d'éléments possible, car cela augmentera la vitesse de manipulation.

(function() { 
    var myTable = $('<table></table>'); 
    $('body').append(myTable); 
    myTable.html('<thead></thead><tbody></tbody>'); 
})(); 

Answer 4

Vous pouvez utiliser jTemplates ou DOM creation plugin écrire facile à lire le code.

Answer 5

Il est bien court introcution à ce que vous cherchez ici: Creating Dynamic Tables with jQuery