Récupérer le résultat d'un script dans la page html

**Mopige** · 01/12/2018, 18h21

Bonjour,

Dans une page html je souhaite afficher un tableau pour permettre à l'utilisateur de saisir des données. Or le nombre de colonnes du tableau dépend du volume des données et doit donc être saisi par l'utilisateur dans un formulaire qui lance alors un script JavaScript pour créer le tableau.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form name="somRisk" method="post">
	Nombre de variables <input type="text" name="nbVa">  <br>
	<input type="button" name="lancer" value="valider" onclick="creerTab(somRisk)"> <br>
</form>

Tous cela fonctionne très bien sauf que le tableau créé est alors affiché dans une autre page. Comment faire pour afficher le tableau dans la page initiale à la suite du bouton "valider". Il est aussi nécessaire que le code html reprenne la main pour afficher un nouveau formulaire qui lancera un script JS pour traiter les données.

Merci pour votre aide

**NoSmoking** · 02/12/2018, 10h11

Bonjour,
pas assez d'informations pour te répondre avec justesse, met nous au moins ta fonction creerTab(somRisk) et pourquoi mettre ce code HTML dans un élément <form> ?

**Mopige** · 02/12/2018, 11h34

Bonjour,
Merci pour ta réponse
Je joint ci-dessous:

le fichier html "essai2b.html" qui lance l'application test
le fichier js "code2c.js" qui construit le tableau
le fichier "stylegs.css" qui contient la deuille de style

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML>
<html>
<head> 
	<title>Somme de variables uniformes indépendantes</title>
	<meta charset="utf-8" />  <!-- Fin de la section d'en-tete du document -->
	<script language="JavaScript" src="code2c.js"></script>
	<link rel="stylesheet" href="stylegs.css" />
</head>
 
<body>
	<p>Le tableau suivant est généré par un script JS</p>
	<form name="somRisk" method="post"> <!-- onsubmit="this.target=window.open()"-->
	Nombre de variables <input type="text" name="nbVa">  <br>
	<input type="button" name="lancer" value="valider" onclick="creerTab(somRisk)"> <br>
								<!-- value = libellé du button-->
	</form>
 
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var valeur=new Array();
valeur[0]=new Array();valeur[1]=new Array();valeur[2]=new Array();valeur[3]=new Array();
var lib = new Array("loi","min","max","mode")
var tabin; var nocol;//valeur de tabindex, numéro de la colonne
var nCo;
var maxcol=3; var nbtab=1; var rescol=0;
 
function creerTab(f) {
	document.write("bonjour <br>");
	nCo = f.nbVa.value;
	document.write("Nbre de VA : "+nCo);
	document.write("<form name='lesva' method='post'>");
	document.write("<table id='letablo'>");
	document.write("<tr>");		//ligne des headers (entêtes)
	document.write("<th> </th>");
	for (var col=0; col<nCo; col++)  {
		nocol=col+1;
		document.write("<th>"+nocol+"</th>");
	}
	document.write("</tr>");				//fin lignes headers
	for (var lig=0; lig<4; lig++)  {
		document.write("<tr>");
		document.write("<td>"+lib[lig]+"</td>");
		for (var col=0; col<nCo; col++)  {
			tabin = 1+lig+4*col;
			document.write("<td> <input type='text' tabindex="+tabin+" </td>");
			// onChange='saisie(\"lig\",\"col\")'>);//name="+valeur[lig][col]"
		}
		document.write("</tr>"+"<br>")
	}
	document.write("</table>");
	document.write("</form>");
 
//	document.write("<form name='lireva' method='post'>");
//	document.write("<input name='lancer' value='Valider' onclick='simu' type='button' ">
}

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
		/* un sélecteur et un bloc de déclarations propriété: valeur */
	p 	{
		color: blue; }
	#letablo {
		border-collapse: collapse;
		table-layout:auto;
		text-align: center;
		}
	#letablo > th, #letablo > td {
		colspan:5px;
		width:5px;
		text-align: center;
		}

J'en profite pour ajouter une question concernant l'utilisation du style: Je souhaite pouvoir définir la taille des cellules, le nombre maximum de caractères par cellule et positionner le texte au centre de la cellule. Je tourne en rond en essayant de paramétrer la feuille de style mais je n'y arrive pas. Si tu as conseil, je suis preneur.
Merci

**NoSmoking** · 02/12/2018, 18h48

Tous cela fonctionne très bien sauf que le tableau créé est alors affiché dans une autre page.

c'est de la faute à document.write, à fuir autant que faire ce peut.
Il est préférable d'utiliser les méthodes du DOM pour construire ta <table>, le code est plus verbeux mais plus pérenne.

Les méthodes possibles

et/ou les méthodes pour les éléments de la <table>

le nombre maximum de caractères par cellule et positionner le texte au centre de la cellule.

même si cela serait à traiter sur le forum CSS, le centrage peut être fait en utilisant la déclaration CSS text-align:center sur tes <input> et pour le nombre de caractères il existe l'attribut maxlength.
Voir : l'élément <input>

Sans oublier : II-I-3. Les champs texte monolignes issu de Les bases du HTML.

**Mopige** · 02/12/2018, 19h44

Merci pour ta réponse qui contient beaucoup d'informations à exploiter. Je laisse la discussion en sommeil le temps d'examiner et de digérer les méthodes proposées.
Concernant la question CSS, je l'avais posée sur le forum CSS, mais étant sans réponse, j'ai profité de cet échange.
Encore merci

**NoSmoking** · 04/12/2018, 10h36

Concernant la question CSS, je l'avais posée sur le forum CSS, mais étant sans réponse, j'ai profité de cet échange.

c'est exact et je viens d'y répondre, sachant que la disponibilité des uns et des autres fait que parfois les réponses ne sont pas immédiates

**Mopige** · 04/12/2018, 12h02

Bonjour,
Je progresse. Comme conseillé dans la réponse précédente, j'ai utilisé la fonction insertRow, et ça marche, sauf que:
je ne sais pas comment insérer <input type="text" name="1nom" id="1id"> dans chaque cellule créée sans utiliser document.write qui fait changer de page, et donc qui est à proscrire.
Je suis certain qu'il y a une solution et je remercie celui (ou celle) qui l'aurait de m'en faire profiter.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE HTML>
<html>
<head>
 
<title>Somme de variables indépendantes</title>
<meta charset="utf-8" />
<!--<script language="JavaScript" src="code2d.js"></script>-->
<link rel="stylesheet" type="text/css" href="stylegs.css" />
<script type="text/javascript">
 
function ajouterLigne()         {
        var tableau = document.getElementById("tablo");
        var ligne = tableau.insertRow(-1);              //on a ajouté une ligne
        for (var c=0; c<=4; c++)  {
                var lign=ligne.insertCell(c);
        }
}
</script>
</head>
<body>
 
<p>Création d'un tableau pour lister les risques.</p>
 
<form method="post" action="">
	<input type="button" onclick="ajouterLigne(tablo)" value="Ajouter" />
</form>
 
<table id="tablo" border="1">
	<thead>
		<tr>
			<th>Risque</th>
			<th>Loi</th>
			<th>Min</th>
			<th>Max</th>
			<th>Mode</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> <input type="text" name="r1a" id="nroa"> </td>
			<td> <input type="text" name="r1b" id="nrob"> </td>
			<td> <input type="text" name="r1c" id="nroc"> </td>
			<td> <input type="text" name="r1d" id="nrod"> </td>
			<td> <input type="text" name="r1e" id="nroe"> </td>
		</tr>
	</tbody>
</table>
 
</body>
</html>

**NoSmoking** · 04/12/2018, 13h23

Tu en es pas loin mais tu as oublié les méthodes createElement et appendChild qui dans ce cas sont tout à fait judicieuses.

Exemple pour ta fonction revue et corrigée

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function ajouterLigne() {
  // déclaration des variables
  var oInput;
  var oRow;
  var oCell;
  var nbCell = 5;
  var ind;
  var tableau = document.getElementById("tablo");
  // insertion d'une ligne
  oRow = tableau.insertRow(-1);
  for (ind = 0; ind < nbCell; ind += 1) {
    // insertion d'une cellule
    oCell = oRow.insertCell(ind);
    // création de l'<input>
    oInput = document.createElement("INPUT");
    // affectation longueur maxi
    oInput.setAttribute("maxlength", 8);
    // ajout élément à la cellule
    oCell.appendChild(oInput);
  }
}

Nota: il est préférable de mettre ton code directement dans la page, entre balise [CODE][/CODE].
Aide sur l'utilisation des boutons [Infos]

**eleydet** · 04/12/2018, 14h21

Bonjour,
Une autre manière d'éviter la fonction document.write(), plus simple peut-être pour un débutant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
    function creerTab() {
      var nb=document.getElementById("nbVa").value;
      var ch="<table border='1'>";     
      for (var i=0; i<nb; i++) {
        ch+="<tr><td>"+i+"</td></tr>";
      }
      ch+="</table>";
      document.getElementById("tab").innerHTML=ch;
    }
    </script>
  </head>
  <body>
    Nombre de variables <input type="text" id="nbVa"><br>
    <input type="button" value="valider" onclick="creerTab();">
    <div id="tab"></div>
  </body>
</html>

**NoSmoking** · 04/12/2018, 14h31

Bonjour eleydet,

plus simple peut-être pour un débutant

certes, l'utilisation de innerHTML bien que « visiblement » plus simple et plus lisible n'est à mon sens pas un cadeaux à faire à un débutant qui de ce fait n’appréhendera pas ou mal le DOM et les problèmes qu'il pourra engendrer.

**Watilin** · 05/12/2018, 01h29

insertAdjacentHTML est déjà un peu plus efficace.

innerHTML, utilisé en écriture, est à bannir ! Il faut arrêter de le conseiller, aux débutants comme au reste du monde. Sous tout point de vue, il est la pire des solutions, et ne répond à aucun besoin que ne couvrent les autres techniques. Ça devrait être une propriété en lecture seule. insertAdjacentHTML existe depuis IE4 et est compatible partout !

Et même en lecture, dans bien des cas on a seulement besoin de textContent.

**Mopige** · 05/12/2018, 09h38

Merci pour vos réponses qui comme précédemment contiennent pas mal d'informations. Je vais commencer par m'initier au DOM car je souhaite comprendre ce que je fais. Je reviendrai cliquer sur Résolu si je ne rencontre plus de difficultés.

**Mopige** · 20/12/2018, 15h34

Désolé, j'ai loupé la mise en place du code. Je fais un nouvel essai qui remplace le précédent.

Bonjour,
Comme indiqué dans mon message précédent, je me suis initié au DOM que je pensais avoir compris, mais j'ai un problème, probablement simple, que je n'arrive pas à résoudre.
Dans l'exemple ci-dessous, le tableau contient initialement 8 cellules, dont 6 permettent la saisie (td de class='risq' contenant un input). La fonction "ajouterLigne()" ajoute 4 cellules dont 3 pour la saisie.
Dans la fonction "traitement()", on crée dans un premier temps le "Tablo = document.getElementsByClassName('risq')" contenant les éléments de classe "risq", et il y en a 9, ce qui est correct si l'on clique sur "Ajouter" une fois. Puis dans cette fonction, on affiche ce Tablo avec innerHTML et on obtient le résultat suivant :

nbre de cellules 9
x : <input type="text" id="1">
x : <input type="text" id="2">
x : <input type="text" id="3">
x : <input type="text" id="4">
x : <input type="text" id="5">
x : <input type="text" id="6">
x : (répété 3 fois)
Pourquoi les 3 dernières cellules ne s'affichent pas comme les précédentes avec id = 7, puis 8 puis 9.

Aux lignes 43 et 44, on a les instructions suivantes:
var x = document.getElementById('5').innerHTML;
alert(x);
Pourquoi l'affichage reste blanc.
Merci pour votre aide si vous pouvez me dépanner

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE HTML>
<html>
<head>
	<title>Somme de variables indépendantes</title>
	<meta charset="utf-8" />
	<!--<script language="JavaScript" src="code2d.js"></script>-->
	<link rel="stylesheet" type="text/css" href="stylegs.css" />
 
<script type="text/javascript">
        var nbCeLig = 8;                //nbre de cellules par ligne
        var nbLign = 1;
        var nbRisk = 2;
function ajouterLigne() {
        // déclaration des variables
        var oInput; var oRow; var oCell; var oText;
        var idCel;                      //identifiant de la cellule à créer
        var nuroRisk = 3;       //N° du premier risque à créer
        var ind;
        
        var tableau = document.getElementById("tablo");
        oRow = tableau.insertRow(-1);           // -1 : la ligne est ajoutée comme dernière ligne
        nbLign = nbLign + 1;
        
        nbRisk++;
        oCell = oRow.insertCell(-1);                    // insertion de la 1ère cellule
        oText = document.createElement("td");   // création de td
        oText.setAttribute("maxlength", 4);             // affectation longueur maxi
        newText = document.createTextNode(nbRisk);
        oCell.appendChild(newText);                             // Append a text node to the cell
        for (ind = 2; ind <= 4; ind ++) {
                oCell = oRow.insertCell(-1);                            // insertion d'une cellule ind
                oInput = document.createElement("INPUT");       // création de l'<input>
                oInput.setAttribute("maxlength", 8);            // affectation longueur maxi
                idCel = 6 * (nbLign - 1) + ind - 1;
                oInput.setAttribute("id", idCel);               // affectation d'un id
                oInput.setAttribute("class", "risq");   // affectation d'une classe
                oCell.appendChild(oInput);                              // ajout élément à la cellule
        }
}
function traitement()  {
        var icel; var lig; var col;
        var lavaleur; var i;
        var x = document.getElementById('5').innerHTML;
        alert(x);
        var unRisk = new Array();
        unRisk[0] = new Array();        //Min
        unRisk[1] = new Array();        //Max
        unRisk[2] = new Array();        //Mode
        var leTablo = document.getElementsByClassName('risq');
        var nbCel = leTablo.length;
        console.log("nbre de cellules  " +nbCel);
        for (i = 0; i < nbCel; i++) {
                x = leTablo[i].innerHTML;                       //;textContent
                console.log("x : " +x);
        }
}
</script>
</head>
 
<body>
<p> Saisir un tableau à partir de la cellule 2, le N° s'affiche dans la cellule 1</p>
<p> Bon courage Gérard</p>
 
<form method="post" action="">
	<input type="button" name="lancer" value="Ajouter" onclick="ajouterLigne(tablo)" class="bouton">
</form>
 
<table id="tablo" border="1">
	<thead>
		<tr>
			<th>N°</th>
			<th>Min</th>
			<th>Max</th>
			<th>Mode tri</th>
			<th>N°</th>
			<th>Min</th>
			<th>Max</th>
			<th>Mode tri</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td class="risq"> <input type="text" id="1"> </td>
			<td class="risq"> <input type="text" id="2"> </td>
			<td class="risq"> <input type="text" id="3"> </td>
			<td>2</td>
			<td class="risq"> <input type="text" id="4"> </td>
			<td class="risq"> <input type="text" id="5"> </td>
			<td class="risq"> <input type="text" id="6"> </td>
		</tr>
	</tbody>
</table>
 
<form method="post" action="">
	<input type="button" name="lancer" value="Valider" onclick="traitement(tablo)" class="bouton">
</form>
 
</body>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
		/* un sélecteur et un bloc de déclarations propriété: valeur */
	p 	{
		color: blue; }
	table {
		border-collapse: collapse;	//the table borders should be collapsed into a single border
		border:1px solid gray;
		vertical-align:middle;
		table-layout:auto;
	}
	tr {
		font-family:calibri;
		height: 20px;
		font-size:small;
	}
	td { 
		border-width:1px;
		border-style:solid; 
		border-color:gray;
		vertical-align:middle;
		text-align:center;
		width:60px;
		font-size:small;
	}
	input {
		font-size:11px;
		height: 15px;
		width: 50px;
		text-align:center;
}
	input.bouton {
		font-size:12px;
		background-color: yellow;
		height: 25px;
		width: 70px;
	}

**eleydet** · 20/12/2018, 21h50

Bonsoir,

Commençons par le plus facile, la deuxième partie de la question. Il faut écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var x = document.getElementById('5').value;

Concernant la première partie de la question, la class "risq" est d'abord associée à la balise TD, puis ensuite, après appui sur le bouton "Ajouter", à la balise INPUT. Elle devrait être toujours associée à la balise TD...

**Watilin** · 21/12/2018, 15h57

Pour compléter ce qu’a dit eleydet, je me souviens avoir eu du mal à comprendre la façon dont les inputs sont gérés dans le DOM. Ils n’ont pas de descendants dans l’arbre, ni élément HTML, ni nœud texte, ni quoi que ce soit. En revanche ils ont une valeur qui évolue en fonction des actions de l’utilisatrice ou de l’utilisateur. La confusion vient du fait qu’on pense qu’ils contiennent leur valeur, tout comme un élément DOM « normal » contient ses descendants. Je ne sais pas si je suis clair.

En bref, un input ne contient pas de valeur, il a une valeur. C’est pour ça qu’il faut consulter sa propriété DOM value. Les propriétés comme innerHTML, textContent et autres ne marcheront pas car elles portent sur la descendance dans l’arbre DOM.

Voici une solution pour gérer tes classes risq :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
      <td> <input class="risq" type="text" id="1"> </td>
      <td> <input class="risq" type="text" id="2"> </td>
      <td> <input class="risq" type="text" id="3"> </td>
      <td>2</td>
      <td> <input class="risq" type="text" id="4"> </td>
      <td> <input class="risq" type="text" id="5"> </td>
      <td> <input class="risq" type="text" id="6"> </td>

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
  let leTablo = document.getElementsByClassName('risq');
  let nbCel = leTablo.length;
  console.log("Nombre de cellules : " + nbCel);
  for (let cell of leTablo) {
    x = cell.value;
    console.log("x : " + x);
  }

Sinon tu peux carrément laisser tomber la classe risq et sélectionner directement les inputs avec querySelectorAll :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
  let leTablo = document.querySelectorAll('#tablo input');
  let nbInputs = leTablo.length;
  console.log("Nombre d’inputs : " + nbInputs);
  for (let input of leTablo) {
    x = input.value;
    console.log("x : " + x);
  }

**Mopige** · 22/12/2018, 16h08

Bonjour,

Merci pour vos réponses qui m'ont permis non seulement de trouver une solution mais aussi d'améliorer ma connaissance du DOM.
Remarque: en écrivant var x = document.getElementById('5').innerHTML; je cherchais à afficher l'instruction HTML et non la valeur de l'élément, le but étant de vérifier que le code JS avait bien généré l'instruction voulue.
Cette première étape qui consistait à afficher un tableau de saisie de longueur variable étant pratiquement achevée, je clique sur Résolu pour fermer la discussion, et je vous remercie à nouveau.

Merci aussi pour les Cours JavaScript

Récupérer le résultat d'un script dans la page html

JavaScript

Partager

Partager