Créer un tableau de données HTML avec JavaScript

La fonction Table() permet de créer un tableau simple de données HTML.

Les données peuvent être définies, ainsi que l'affichage de l'entête, du pied de table et des cellules.

Table()

Retourne un tableau HTML à partir d'un tableau de données.

Syntaxe

new Table(donnees, options);

Paramètres

donnees(Array)

Le paramètre donnees de la fonction Table() définit le tableau de données à partir duquel générer un tableau HTML.
Chaque donnée peut être une chaines de caractères (HTML ou non), ou un objet cellule à construire.

cellule(Object)

Un objet cellule contenu dans les données permet de mettre en forme la cellule HTML d'une donnée à afficher.

content(String)

La propriété content d'un objet cellule définit le contenu de la cellule, sous forme d'une chaine de caractères (HTML ou non).

attributes(Object)

La propriété attributes d'un objet cellule définit les attributs à appliquer à la cellule (ex: colspan, align, etc).

options(Object)

Le paramètre options de la fonction Table() définit l'utilisation d'une entête et d'un pied de table.

Propriétés

thead(Boolean)

La propriété thead du paramètre options définit l'utilisation de la première ligne des données en tant qu'entête du tableau HTML.
Si cette propriété est omise, la valeur false par défaut sera utilisée et le tableau n'aura pas d'entête.

tfoot(Boolean)

La propriété tfoot du paramètre options définit l'utilisation de la dernière ligne des données en tant que pied du tableau HTML.
Si cette propriété est omise, la valeur false par défaut sera utilisée et le tableau n'aura pas de pied.

var donnees = [
  [ "Ligne 1, Colonne 1", "Ligne 1, Colonne 2" ],
  [ "Ligne 2, Colonne 1", "Ligne 2, Colonne 2" ],
  [ { content: "Ligne 3", attributes: { colspan: 2 } } ],
  [ "Ligne 4, Colonne 1", "Ligne 4, Colonne 2" ]
];

var options = {
  thead: true,
  tfoot: true
};

new Table(donnees, options);

// renvoie : 
// 
// <table>
//   <thead>
//     <tr><th>Ligne 1, Colonne 1</th><th>Ligne 1, Colonne 2</th></tr>
//   </thead>
//   <tbody>
//     <tr><td>Ligne 2, Colonne 1</td><td>Ligne 2, Colonne 2</td></tr>
//     <tr><td colspan="2">Ligne 3</td></tr>
//   </tbody>
//   <tfoot>
//     <tr><td>Ligne 4, Colonne 1</td><td>Ligne 4, Colonne 2</td></tr>:
//   </tfoot>
// </table>

function Table(a,b){var c=function(s){return document.createElement(s);},d=c('table'),
e=b.thead?a.splice(0,1):[],f=b.tfoot?a.splice(-1,1):[],g=function(h,i,j){var k=c(h),
l=j.length,m=0;for(m;m<l;m++){var n=c('tr'),o=j[m].length,p=0;for(p;p<o;p++){var q=c(i),
r=j[m][p];if(typeof r==='string'){q.innerHTML=r;}else{if(r.content){q.innerHTML=r.content;}
if(r.attributes){for(var s in r.attributes){q.setAttribute(s,r.attributes[s]);}}}
n.appendChild(q);}k.appendChild(n);}d.appendChild(k);};if(e.length>0){g('thead','th',e);}
if(a.length>0){g('tbody','td',a);}if(f.length>0){g('tfoot','td',f);}return d;}