[DOM] tableau et javascript

**franfr57** · 11/12/2006, 14h21

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

**SpaceFrog** · 11/12/2006, 15h01

regarde du coté du DOM

**franfr57** · 11/12/2006, 20h15

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...

**amika** · 11/12/2006, 20h49

tu donne à chaque td un ID unique et tu accede par innerHTML
html:

Code :

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

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

javascript:

Code :

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

document.getElementById('idDeCeTD').innerHTML='blabla..'

**franfr57** · 11/12/2006, 20h58

en fait c'est dans un champ input que je veux écrire le texte, j'ai essayer ceci sans résultat correct :

Code :

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

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

**amika** · 11/12/2006, 21h25

pour les champs de ton form tu peux acceder autrement:

Code :

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

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

**franfr57** · 11/12/2006, 21h50

Mon champ est définit comme ceci dans mon fichier html :

Code :

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

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 :

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

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?

**amika** · 11/12/2006, 22h22

Code :

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

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

**franfr57** · 12/12/2006, 05h43

voila j'ai modifier comme ça :

Code :

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

1
2
3
4
5
6
7
8
 
<html>
 
<script>
document.getElementByName("Q1").value='test';
 
</script>
<head>

mais toujours aucun résultat?

**Jabbal'H** · 12/12/2006, 15h55

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 ).

**amika** · 12/12/2006, 16h54

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

**franfr57** · 20/12/2006, 12h59

Ce n'est pas un form mais un tableau :

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
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 :

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

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

Je voudrais que cela marche sur tous les navigateurs MErci

**amika** · 20/12/2006, 15h42

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
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 :

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

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

**franfr57** · 20/12/2006, 15h50

je voudrais le faire sans formulaire mais cela ne marche pas sous firefox!

**SpaceFrog** · 20/12/2006, 15h53

il suffit d'eviter la syntaxe document.form.element et adopter la syntaxe getElementById ...

**franfr57** · 20/12/2006, 15h56

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

**landryx** · 20/12/2006, 16h40

Code :

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

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...

**SpaceFrog** · 20/12/2006, 16h42

Code :

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

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

retourne une collection ...
manque l'indice ... [0] par exemple si c'est le premier tableau du flux ...

**landryx** · 20/12/2006, 16h46

c'est pas faux..erreur de frappe

[DOM] tableau et javascript

JavaScript

Discussions similaires

Partager

Partager