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>

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

JavaScript

Vue hybride

Partager

Partager