Fonction qui affiche un tableau Array en tableau HTML

Question

Fonction qui affiche un tableau Array en tableau HTML

Signaler

schokobolla

Messages postés: 1
Date d'inscription: dimanche 18 janvier 2015
Statut: Membre
Dernière intervention: 18 janvier 2015

- Modifié par Whismeril le 18/01/2015 à 20:33
cs_jperre

Messages postés: 268
Date d'inscription: lundi 9 janvier 2006
Statut: Membre
Dernière intervention: 19 janvier 2017

- 22 janv. 2015 à 23:03

Bonjour,

Je vous écris car j'ai besoin de votre aide.
Je suis débutante en javascript et j'ai un exercice à réaliser qui consiste, en 2 fonctions, à respectivement convertir un tableau Array 1 dimension en un tableau 2 dimensions (fonctionF11 ci-dessous) et à afficher ensuite ce tableau 2 dimensions dans un fichier Html dans la balise <table>.
J'ai donc 1 fichier Html dans lequel j'appelle 2 fichiers javascript ; l'un où se trouve le tableau Array 1 dimension et l'autre où se trouvent les 2 fonctions javascript.

Quand j'exécute le fichier html, le tableau 2 dimensions ne s'affiche pas.
Je n'arrive pas à trouver d'où provient l'erreur.
Voici les extraits des 3 fichiers :

Fichier Html :

<html>
 <head>
  <title>Exercice Sudoku</title>
 <script languge="javascript" type="text/javascript" src="javascript_test_je1.js"> 
 </script>
 <script language="javascript" type="text/javascript" src="DAL_test_javascript_ex1.js">
 </script>
 </head>
 <body>
 <script type="text/javascript">
 document.write(tableau_chiffres);
 document.write("<br><br>");
 F11tab1Dtab2D(tableau_chiffres);
 F12affichetableau(verifier);

 </script>
 </body>
</html>

Fichier javascript tableau 1 dimension :

var tableau_chiffres = new Array(9);
tableau_chiffres[0]="4 2 7 3 5 1 9 8 6";
tableau_chiffres[1]="9 8 3 7 6 2 5 1 4";
tableau_chiffres[2]="1 5 6 8 9 4 7 2 3";
tableau_chiffres[3]="2 3 9 1 8 5 4 6 7";
tableau_chiffres[4]="7 4 1 6 3 9 2 5 8";
tableau_chiffres[5]="5 6 8 2 4 7 1 3 9";
tableau_chiffres[6]="8 7 2 9 1 3 6 4 5";
tableau_chiffres[7]="3 9 5 4 2 6 8 7 1";
tableau_chiffres[8]="6 1 4 5 7 8 3 9 2";

Fichier javascript où j'ai rédigé les 2 fonctions :

var verifier = new Array(9);
for(i=0;i<9;i++){
 verifier[i]=new Array(9);
}

//Fonction F11

var F11tab1Dtab2D =function()
{
 document.write("Tableau 1 dimension"+"<br>");

 for(ligne=0;ligne<9;ligne++){
  document.write("Ligne "+ligne+": "+tableau_chiffres[ligne]+"<br>");
 }
 for(index=0;index<9;index++){
  for(ligne=0;ligne<9;ligne++){
   verifier[index][ligne]=Number(tableau_chiffres[index].substring(ligne*2,(ligne+1)*2));
  }
 }
}

var F12affichetableau = function(myArray)
{
 document.write("Tableau a verifier :<br>");
var result = "<table border=1>";
for(var i=0; i<myArray.length;i++){
 result +="<tr>";
 for(var j=0;j<myArray[i].length;j++){
  result += "<td>"+myArray[i][j]+"</td>"; 
 }
 result += "</tr>";
}
result += "</table>";

return result;
}

Je vous remercie grandement pour votre aide !
Bonne soirée,

EDIT: Ajout de la coloration syntaxique.

Afficher la suite

A voir également:

Fonction qui affiche un tableau Array en tableau HTML
Une petite fonction pour afficher les tableaux php - Codes sources - PHP (Astuces)
Afficher un tableau html - Conseils pratiques - PHP
Fonction d'affichage de tableau (arrays) - Codes sources - PHP (Astuces)
PHP : Afficher / convertir un array php multidimention en tableaux html inbriqué - print_r - - Guide
Afficher un array dans un tableau html ✓ - Forum - Javascript / DHTML

1 réponse

Répondre Posez votre question

cs_jperre · Answer 1 · 2015-01-22T23:03:01+0100

Pour créer un tableau html à partir de votre objet Array() "tableau_chiffres", vous n'avez pas besoin de créer un tableau à deux dimensions. Dans JavaScript il existe un objet String pour traiter les chaînes. Cet objet a une méthode split qui transforme une chaîne en un objet Array() de sous chaînes.
Pour votre cas vous créez un tableau HTML avec juste les balises <table id="IdTableauHTML"> et </table> et ensuite vous ajoutez le script Javascript suivant :

function createTableHTML() {
var tResult=document.getElementById("IdTableauHTML");
var arCells=new Array(8);
var n=0;
var m=0;
for (n=0;n<tableau_chiffres.length;n++) {
     arCells=tableau_chiffres[n].split(" ");//Le séparateur est l'espace
     var rResult=tResult.insertRow(n);
     for (m=0;m<arCells.length;m++) {
          var cResult=rResult.inserCell(m);
          cResult.innerHTML=arCells[m];
          }
     }
}

Remarque:
Dans HTML5 les attributs langage et type de l'élément <script> sont inutiles, seul l'attribut src est nécessaire. Car JavaScript est le langage par défaut. Dans HTML4 l'attribut langage est également obsolète.
--

Votre réponse