Création d'une table

Rappel

Tout d'abord, il faut savoir qu'une table contrairement aux pratiques trop répandu sur l'Internet ne sert pas à la présentation (-> c'est le rôle du CSS), mais plutôt à l'organisation de données de manière cohérente. Une table est composée de différentes parties chacune désignée par des balises différentes :

• la balise principale d'une table est la balise <table>;
• Une table à besoin d'une légende, c'est le rôle de la balise <caption>;
• une table en XHTML est un ensemble de lignes qui sont reprises sous la balise <tr>;
• Chaque ligne d'une table est composé de cases représentées généralement par la balise est <td>. Mais lorsque cette case contient un titre on lui préfèrera la balise <th> ;
• Enfin pour montrer la différence entre les données d'une table et ses entêtes, on utilise les balises <thead>, <tfoot> pour l'entête et le bas de table, et <tbody> pour le contenu à proprement parler de la <table> ;

ceci est un tableau statique

colonne 1	colonne 2	colonne 3	colonne 4
colonne 1	colonne 2	colonne 3	colonne 4
row 1, cols 1	row 1, cols 2	row 1, cols 3	row 1, cols 4
row 2, cols 1	row 2, cols 2	row 2, cols 3	row 2, cols 4
row 3, cols 1	row 3, cols 2	row 3, cols 3	row 3, cols 4
row 4, cols 1	row 4, cols 2	row 4, cols 3	row 4, cols 4

Comme vous le constater, la création d'une table avec le DOM demandera la création ordonné de plusieurs balises et leur intégration progressive dans la balise générale <table> .

Création d'une table

C'est pourquoi j'ai mis sur pied une fonction createTable en javascript qui accepte 2 valeur, nbrows correspondant au nombre de lignes et nbcols correspondant au nombre de colonnes que l'ont veut voir dans notre table. Voici la méthode de création de cette fonction.

function createTable(nbrows,nbcols){
  //1) setting tbody node
  var tbody = document.createElement("TBODY");
  for(var i = 0; i < nbrows; i++){
    var tr = document.createElement("TR");
    for (var j = 0; j < nbcols; j++){
      var td = document.createElement("TD");
      var td_text = "rows "+eval(i+1)+", cols "+eval(j+1);
      td_text = document.createTextNode(td_text);
      td.appendChild(td_text);
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  
  //2) setting thead and tfoot
  var thead   = document.createElement("THEAD");  
  var tfoot   = document.createElement("TFOOT"); 
  var trTitle = document.createElement("TR"); 
  for (var j = 0; j < nbcols; j++){
    var th = document.createElement("TH");
    th.appendChild(document.createTextNode("colonne " + j));
    trTitle.appendChild(th);
  }
  thead.appendChild(trTitle.cloneNode(true));
  tfoot.appendChild(trTitle.cloneNode(true));
  
  //3) setting caption
  var caption       = document.createElement("CAPTION");
  var caption_text  = "ceci est un tableau de "+nbrows";
      caption_text += " lignes et de"+nbcols +" colonnes";
      caption_text += " publié à l'aide du DOM";
  caption_text = document.createTextNode(caption_text);
  caption.appendChild(caption_text);
  
  //4) setting table
  var table   = document.createElement("TABLE"); 
  table.appendChild(caption);
  table.appendChild(thead);
  table.appendChild(tfoot);
  table.appendChild(tbody);
  
  //5) appending table to the document tree
  document.getElementById("content").appendChild(table);
}

1. En utilisant createTextNode, createElement, appendChild ainsi que 2 boucles for de javascript nous créons successivement un noeud tbody ainsi que les nbrows <tr> et les ncols <td> de la partie <tbody> de notre future table.
2. En utilisant la même méthode nous créons l'unique <tr> qui doit contenir les nbrows <th> de la table. Comme le contenu de <thead>, <tfoot> et identique nous utilisons cloneNode pour nous faciliter le travail.
3. Enfin nous créons la partie caption de la table. en utilisant createTextNode et createElement.
4. Maintenant que toutes les parties de la table sont créées il faut créer un noeud <table> et d'agencer nos différents noeuds soit avec insertBefore, soit avec appendChild, cela dépend de votre humeur...
5. Finalement vous pouvez publier vote table dans le document XHTML là où vous le désirez !!!!

Effacer une table

Mais comme vous le remarquer tout de suite, nous ne faisons que créer des tables et rapidement elle encombre votre navigateur il faudrait donc mettre en place un moyen pour les effacer, c'est le but de la fonction removeTable qui va tout simplement enlever aller enlever le noeud ajouter si celui-ci est un noeud de type balise et de nom table.

// detect lasChild of #content and delete it if it is a table
function removeTable(){
  var content = document.getElementById("content");
  if(content.lastChild.nodeName == "TABLE")
  content.removeChild.(content.lastChild);
}

En utilisant cette fonction nous pouvons donc effacer une table. Mais, le plus simple ne serait-il pas de controler la présence ou non d'une table avant d'en créer une autre ainsi le contôle serait accompli par notre script et plus par nous...

Affinement de nos script

Une manière de le faire serait d'utiliser l'id de la table créée, comme createNewTable qui nous permet de créer plus "intelligemment" les tables suivantes :

// merge the 2 previous functions to allow the presence of 
// a maximum one table at a time
function createNewTable(rows,cols){
  var content = document.getElementById("content");
  if(content.lastChild.id == "newTable") removeTable();
  createTable(rows,cols);
  if(content.lastChild.nodeName == "TABLE") 
  content.lastChild.setAttribute("id","newTable");
}