[DOM] tableau et javascript

Version imprimable

11/12/2006, 14h21
franfr57

[DOM] tableau et javascript

BOnjour,
j'ai une page avec un tableau html dans lequels se trouve des champs texte et je voudrais en javascript :
- insérer des valeurs par défaut dans ce tableau (je pensais à un document.write(...))
- dans une des cases faire un calcul en fonction des nombres dans d'autres colonnes-> donc récupérer ce qu'il y a dans les autres cases et faire le calcul
- rendre une colonne modifiable et quand celle ci est modifié refaire le calcul
- rentre une colonne non modfiable

En html je sais le faire, mais je souhaite le faire en javascript!
Merci de votre aide
11/12/2006, 15h01
SpaceFrog

regarde du coté du DOM
11/12/2006, 20h15
franfr57

je connais un petit peu cela...
Mais cela ne m'aide pas vraiment, je ne vois pas par ou commencer, je suis complétement perdu...
11/12/2006, 20h49
amika
tu donne à chaque td un ID unique et tu accede par innerHTML
html:
Code:

1 2 3 ..... <td id='idDeCeTD'>...</td> ...
javascript:

Code:

document.getElementById('idDeCeTD').innerHTML='blabla..'
11/12/2006, 20h58
franfr57
en fait c'est dans un champ input que je veux écrire le texte, j'ai essayer ceci sans résultat correct :
Code:

1 2 value="document.write("1");"
et pour récupérer ce que j'ai écrit dans ce champ, ej dois mettre un id? et quel fonction puis je utiliser?

Merci de votre aide

pour les champs de ton form tu peux acceder autrement:
Code:

1 2 3 4 document.NomDeTonForm.NomDuChamp.value='...'; ou document.getElementByName(NomDuChamp).value='...'

11/12/2006, 21h50
franfr57
Mon champ est définit comme ceci dans mon fichier html :
Code:

1 2 <font face="Arial" size="1"><input type="text" name="Q1" size="10"></font>
et entre ma balise html et head j'ai mis :
Code:

1 2 3 4 5 6 7 8 <html> <script> document.getElementByName(Q1).value='test'; </script> <head>
mais je n'ai malheureusement rien qui apparait dans S1 est ce normal?

Code:

1
2
3
4
<script>
document.getElementByName("Q1").value='test';
 
</script>

voila j'ai modifier comme ça :
Code:

1 2 3 4 5 6 7 8 <html> <script> document.getElementByName("Q1").value='test'; </script> <head>
mais toujours aucun résultat?

12/12/2006, 15h55
Jabbal'H

le getElementByName ne te renvois pas un tableu d'objet ? ( pas sur )
si il y a plusieurs élément avec le meme nom, tu devrais essayer avec des IDs plutot si tu peux ( ou les tag, mais pareil c'est un tableau ).
12/12/2006, 16h54
amika

peux tu nous montrer le code de ton form (<form..>...</form>) comment il est construit.

Ce n'est pas un form mais un tableau :

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
100
101
102
 
<body onLoad="initialisation();">
<table border="2" cellspacing="0" style="border-collapse: collapse" bordercolor="#00FF00" width="100%" id="AutoNumber1" bordercolorlight="#009933" bordercolordark="#333300">
	<tr>
		<td>
			<input type="Checkbox">Abonné musiques
		</td>
		<td>
			<input type="Checkbox">Moins de 25 ans
		</td>
	</tr>
</table>
<BR>
<table border="2" cellspacing="0" style="border-collapse: collapse" bordercolor="#00FF00" width="100%" id="AutoNumber1" bordercolorlight="#009933" bordercolordark="#333300">
  <tr>
    <td width="10%"><b><font face="Arial" size="2">Référence</font></b></td>
    <td width="30%"><b><font face="Arial" size="2">Article</font></b></td>
    <td width="20%"><b><font face="Arial" size="2">Quantité</font></b></td>
    <td width="20%"><b><font face="Arial" size="2">Prix Unitaire</font></b></td>
    <td width="20%"><b><font face="Arial" size="2">Prix</font></b></td>
  </tr>
  <tr>
    <td width="10%"><font face="Arial" size="2">DYO4567</font></td>
    <td width="30%"><font face="Arial" size="2">
    <img border="0" src="down.gif" width="9" height="9" onClick="ouvrirFenetre('MonstersInLove.jpg')"> Dionysos - Monsters in Love</font></td>
    <td width="20%">
    <p style="margin-top: 0; margin-bottom: 0">
    	<font face="Arial" size="1"><input type="text" name="Q1" size="10" onChange="calculPrix(Q1,U1,P1);"></font>
    	<font face="Arial" size="2">
			<img border="0" src="plus.gif" width="9" height="9" onClick="augmenteQuantité(Q1)">
			<img border="0" src="minus.gif" width="9" height="9" onClick="diminueQuantité(Q1)">
		</font>
	</td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="U1" size="10"></font></td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="P1" size="10"></font></td>
  </tr>
  <tr>
    <td width="10%"><font face="Arial" size="2">NIR56674</font></td>
    <td width="30%"><font face="Arial" size="2">
    <img border="0" src="down.gif" width="9" height="9" onClick="ouvrirFenetre('Nevermind.jpg')"> Nirvana - Nevermind</font></td>
    <td width="20%">
    <p style="margin-top: 0; margin-bottom: 0">
    	<font face="Arial" size="1"><input type="text" name="Q2" size="10"  onChange="calculPrix(Q2,U2,P2);"></font>
    	<font face="Arial" size="2">
			<img border="0" src="plus.gif" width="9" height="9">
			<img border="0" src="minus.gif" width="9" height="9">
		</font>
		</td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="U2" size="10"></font></td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="P2" size="10"></font></td>
  </tr>
  <tr>
    <td width="10%"><font face="Arial" size="2">NIC56322</font></td>
    <td width="30%"><font face="Arial" size="2">
    <img border="0" src="down.gif" width="9" height="9" onClick="ouvrirFenetre('Petit nicolas.gif')"> Les récrés du petit
    Nicolas</font></td>
    <td width="20%">
    <p style="margin-top: 0; margin-bottom: 0">
    	<font face="Arial" size="1"><input type="text" name="Q3" size="10" onChange="calculPrix(Q3,U3,P3);"></font>
    	<font face="Arial" size="2">
			<img border="0" src="plus.gif" width="9" height="9">
			<img border="0" src="minus.gif" width="9" height="9">
		</font>
		</td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="U3" size="10"></font></td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="P3" size="10"></font></td>
  </tr>
  <tr>
    <td width="10%"><font face="Arial" size="2">SWA45434</font></td>
    <td width="30%"><font face="Arial" size="2">
    <img border="0" src="down.gif" width="9" height="9" onClick="ouvrirFenetre('SwanLake.gif')"> Swan lake - Lot 2
    places</font></td>
    <td width="20%">
    <p style="margin-top: 0; margin-bottom: 0">
    	<font face="Arial" size="1"><input type="text" name="Q4" size="10" onChange="calculPrix(Q4,U4,P4);"></font>
    	<font face="Arial" size="2">
			<img border="0" src="plus.gif" width="9" height="9">
			<img border="0" src="minus.gif" width="9" height="9">
		</font>
		</td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="U4" size="10"></font></td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="P4" size="10"></font></td>
  </tr>
</table>
<BR>
<table border="0">
	<tr>
		<td width="60%">&nbsp;
 
		</td>
		<td width="20%">
			<input type="submit" value="Annuler la commande">
		</td>
		<td width="20%">
			<input type="submit" value="Valider la commande">
		</td>
	</tr>
</table>
 
 
 
</body>

et ma fonction initialisation qui est dans un fichier à part :

Code:

1
2
3
4
5
 
function initialisation()
{
	document.getElementsByName("Q1").value='1';
}

Je voudrais que cela marche sur tous les navigateurs MErci

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
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
100
<body onLoad="initialisation();">
<form name="FRM">
<table border="2" cellspacing="0" style="border-collapse: collapse" bordercolor="#00FF00" width="100%" id="AutoNumber1" bordercolorlight="#009933" bordercolordark="#333300">
	<tr>
		<td>
			<input type="Checkbox">Abonné musiques
		</td>
		<td>
			<input type="Checkbox">Moins de 25 ans
		</td>
	</tr>
</table>
<BR>
<table border="2" cellspacing="0" style="border-collapse: collapse" bordercolor="#00FF00" width="100%" id="AutoNumber1" bordercolorlight="#009933" bordercolordark="#333300">
  <tr>
    <td width="10%"><b><font face="Arial" size="2">Référence</font></b></td>
    <td width="30%"><b><font face="Arial" size="2">Article</font></b></td>
    <td width="20%"><b><font face="Arial" size="2">Quantité</font></b></td>
    <td width="20%"><b><font face="Arial" size="2">Prix Unitaire</font></b></td>
    <td width="20%"><b><font face="Arial" size="2">Prix</font></b></td>
  </tr>
  <tr>
    <td width="10%"><font face="Arial" size="2">DYO4567</font></td>
    <td width="30%"><font face="Arial" size="2">
    <img border="0" src="down.gif" width="9" height="9" onClick="ouvrirFenetre('MonstersInLove.jpg')"> Dionysos - Monsters in Love</font></td>
    <td width="20%">
    <p style="margin-top: 0; margin-bottom: 0">
    	<font face="Arial" size="1"><input type="text" id="QQ" name="Q1" size="10" onChange="calculPrix(Q1,U1,P1);"></font>
    	<font face="Arial" size="2">
			<img border="0" src="plus.gif" width="9" height="9" onClick="augmenteQuantité(Q1)">
			<img border="0" src="minus.gif" width="9" height="9" onClick="diminueQuantité(Q1)">
		</font>
	</td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="U1" size="10"></font></td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="P1" size="10"></font></td>
  </tr>
  <tr>
    <td width="10%"><font face="Arial" size="2">NIR56674</font></td>
    <td width="30%"><font face="Arial" size="2">
    <img border="0" src="down.gif" width="9" height="9" onClick="ouvrirFenetre('Nevermind.jpg')"> Nirvana - Nevermind</font></td>
    <td width="20%">
    <p style="margin-top: 0; margin-bottom: 0">
    	<font face="Arial" size="1"><input type="text" name="Q2" size="10"  onChange="calculPrix(Q2,U2,P2);"></font>
    	<font face="Arial" size="2">
			<img border="0" src="plus.gif" width="9" height="9">
			<img border="0" src="minus.gif" width="9" height="9">
		</font>
		</td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="U2" size="10"></font></td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="P2" size="10"></font></td>
  </tr>
  <tr>
    <td width="10%"><font face="Arial" size="2">NIC56322</font></td>
    <td width="30%"><font face="Arial" size="2">
    <img border="0" src="down.gif" width="9" height="9" onClick="ouvrirFenetre('Petit nicolas.gif')"> Les récrés du petit
    Nicolas</font></td>
    <td width="20%">
    <p style="margin-top: 0; margin-bottom: 0">
    	<font face="Arial" size="1"><input type="text" name="Q3" size="10" onChange="calculPrix(Q3,U3,P3);"></font>
    	<font face="Arial" size="2">
			<img border="0" src="plus.gif" width="9" height="9">
			<img border="0" src="minus.gif" width="9" height="9">
		</font>
		</td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="U3" size="10"></font></td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="P3" size="10"></font></td>
  </tr>
  <tr>
    <td width="10%"><font face="Arial" size="2">SWA45434</font></td>
    <td width="30%"><font face="Arial" size="2">
    <img border="0" src="down.gif" width="9" height="9" onClick="ouvrirFenetre('SwanLake.gif')"> Swan lake - Lot 2
    places</font></td>
    <td width="20%">
    <p style="margin-top: 0; margin-bottom: 0">
    	<font face="Arial" size="1"><input type="text" name="Q4" size="10" onChange="calculPrix(Q4,U4,P4);"></font>
    	<font face="Arial" size="2">
			<img border="0" src="plus.gif" width="9" height="9">
			<img border="0" src="minus.gif" width="9" height="9">
		</font>
		</td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="U4" size="10"></font></td>
    <td width="20%"><font face="Arial" size="1"><input type="text" name="P4" size="10"></font></td>
  </tr>
</table>
<BR>
<table border="0">
	<tr>
		<td width="60%">&nbsp;
 
		</td>
		<td width="20%">
			<input type="submit" value="Annuler la commande">
		</td>
		<td width="20%">
			<input type="submit" value="Valider la commande">
		</td>
	</tr>
</table>
</form>
</body>

js:

Code:

1
2
3
4
function initialisation()
{
	document.FRM.Q1.value='1';
}

20/12/2006, 15h50
franfr57

je voudrais le faire sans formulaire mais cela ne marche pas sous firefox!
20/12/2006, 15h53
SpaceFrog

il suffit d'eviter la syntaxe document.form.element et adopter la syntaxe getElementById ...
20/12/2006, 15h56
franfr57

je ne dois pas modifier mon fichier html comment puis je faire autrement?

Code:

1 2 3 4 5 var tableau = document.getElementsByTagName("table[0]"); // si c'et le premier tableau var p = tableau.getElementsByTagName("p[n]");//idem var elt1 = p.elements["Q1"].value; elt1=1;
je suis pas sur que ça marche mais le code ressemble à peu pres à ça...:mouarf:

20/12/2006, 16h42
SpaceFrog

Code:

var tableau = document.getElementsByTagName("table");

retourne une collection ...
manque l'indice ... [0] par exemple si c'est le premier tableau du flux ...
20/12/2006, 16h46
landryx

c'est pas faux..erreur de frappe