Récupérer le résultat d'un script dans la page html
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:
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
Récupérer le résultat d'un script dans la page html
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:
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:
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:
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
Récupérer le résultat d'un script dans la page html
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
Récupérer le résultat d'un script dans la page htm
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:
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 htm
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:
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:
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;
} |
