Code-source


00001           //   # (gH)   -_-  arrayEnTable.js  ;  TimeStamp (unix) : 19 Novembre 2020 vers 19:45     

00002          

00003           function array2table(tableau,idtableau,idParent,classeTableau) {     

00004          

00005           // ######################################################     

00006          

00007           // on passe d'un tableau Javascript (array à une dimension)     

00008           // à un tableau XHTML (<table>)     

00009          

00010           // par exemple, à partir du tableau Javascript ["Janvier","Février","Mars"]     

00011           // on veut produire le code suivant :     

00012          

00013          

00014           // ###     <div id="divTableau1">     

00015           // ###     

00016           // ###          <table id="tableau1" class="bordure collapse padding20" cellpadding="10" border="1">     

00017           // ###             <tr>     

00018           // ###                <th>Position</th>     

00019           // ###                <th>Valeur</th>     

00020           // ###             </tr>     

00021           // ###             <tr>     

00022           // ###                <td class="droite">1</td>     

00023           // ###                <td>Janvier</td>     

00024           // ###             </tr>     

00025           // ###             <tr>     

00026           // ###                <td class="droite">2</td>     

00027           // ###                <td>Février</td>     

00028           // ###             </tr>     

00029           // ###             <tr>     

00030           // ###                <td class="droite">3</td>     

00031           // ###                <td>Mars</td>     

00032           // ###             </tr>     

00033           // ###          </table>     

00034           // ###     

00035           // ###     </div>     

00036          

00037           // Etape 1 : on crée un élément <table> avec un id et les "bons" attributs border et class     

00038          

00039           tab = document.createElement("table") ;     

00040           tab.setAttribute("id",idtableau) ;     

00041           tab.setAttribute("border",1) ;     

00042           tab.setAttribute("cellpadding",10) ;     

00043           if (classeTableau) { tab.setAttribute("class",classeTableau) ; } ;     

00044          

00045           // Etape 2 : on crée un élément <tr> pour les entetes     

00046           // et on lui adjoint deux éléments <th>     

00047          

00048           etr  = document.createElement("tr") ;     

00049           etd1 = document.createElement("th") ;     

00050           txt1 = document.createTextNode("Position")     

00051           etd1.appendChild(txt1) ;     

00052           etr.appendChild(etd1) ;     

00053           etd2 = document.createElement("th") ;     

00054           txt2 = document.createTextNode("Valeur")     

00055           etd2.appendChild(txt2) ;     

00056           etr.appendChild(etd2) ;     

00057           tab.appendChild(etr) ;     

00058          

00059           // Etape 3 : on utilise une boucle pour créer les éléments <tr> et leur contenu     

00060          

00061           nblig = tableau.length     

00062          

00063           for (var ilig=0 ; ilig < nblig ; ilig++) {     

00064          

00065             etr  = document.createElement("tr") ;     

00066          

00067             etd1 = document.createElement("td") ;     

00068             etd1.setAttribute("class","droite")     

00069             txt1 = document.createTextNode(ilig+1)     

00070             etd1.appendChild(txt1) ;     

00071             etr.appendChild(etd1) ;     

00072          

00073             etd2 = document.createElement("td") ;     

00074             txt2 = document.createTextNode(tableau[ilig]) // # c'est là qu'on utilise le tableau passé en paramère     

00075             etd2.appendChild(txt2) ;     

00076             etr.appendChild(etd2) ;     

00077          

00078             tab.appendChild(etr) ;     

00079          

00080           } ; // fin pour ilig     

00081          

00082           // Etape 4 : il reste à insérer notre élément <table> dans la page     

00083          

00084           document.getElementById(idParent).appendChild(tab) ;     

00085          

00086           } ; // fin de fonction array2table     

00087
Listing du fichier arrayEnTable.js
