Html & Javascript

Version imprimable

24/01/2013, 17h59
sass92

Html & Javascript

Bonjour,

J'ai cherché un peu partout sur le web mais j'ai pas trouvé!

En faite j'ai coder une page entièrement en HTML, et je voudrai que dans un de mes tableau l'utilisateur puisse appuyer sur un bouton "ajouter" afin qu'un ligne s'ajoute à mon tableau.
J'ai trouvé plusieurs moyen qui me permettait d'ajouter une ligne à mon tableau mais la ligne ajoutée n'était pas identique à la précédente!
En faite mon tableau est une série de bouton radio, de liste déroulante, et de case à remplir (le tout fait en html avec des <td> <tr> <input> etc. en quelque sorte un tableau comme sur excel ou l'utilisateur doit le remplir.

Je sais pas si j'ai été assez clair, merci en tout cas pour l'aide que vous pourrez m'apporter.
24/01/2013, 18h37
SpaceFrog

Citation:

J'ai cherché un peu partout sur le web mais j'ai pas trouvé!

Heu ... pas bien loin ou pas beaucoup alors.

Ce forum regorge d'exemples et de posts resolus sur ce sujet ..
25/01/2013, 10h58
sass92

Oui c'est vrai que j'ai pas beaucoup cherché sur ce forum, mais j'ai sur le web j'ai rien trouvé..!
Je vais jeter un gros coup d'oeil sur le forum!
Merci en tout cas :)
25/01/2013, 15h14
sass92

Excusez moi de revenir vers vous, mais je suis nouveau sur le forum, et sur les 700 pages environ concernant le JavaScript je m'en sors pas pour trouver un sujet similaire..!
25/01/2013, 15h19
SpaceFrog

http://www.developpez.net/forums/d12...-balise-table/

http://www.developpez.net/forums/d71...ript-modifier/

http://javascript.developpez.com/faq...st/?page=Table

j'en passe et des meilleurs ...
25/01/2013, 15h23
sass92

Merci beaucoup ! C'est gentil !

J'ai regardé les liens, j'en avais vu deux déjà mais je n'avais pas réussi à trouver la solution à mon problème.
En faite, comme j'ai codé un tableau avec plein de liste déroulante, de case a coché et de case à remplir, je voulais savoir s'il était possible que sans que je touche le code de mon tableau, je puisse, grâce au javascript pouvoir ajouter une ligne?
Désolé ma question peut paraitre bête mais je débute en javascript..!

Merci

j'ai misun bout de mon code html avec le fameux tableau que je voudrai pour ajouter des lignes afin que l'utilisateur puisse ajouter le nombre qu'il veut !

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
 
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
</head>
 
<body>
 
<table border=2px  style="border-radius:3px;border-collapse:collapse;" >	
	<tr style="text-align: center; vertical-align: middle;" >
		<th colspan="2">Baie</th> 
		<th colspan="2">Serrure</th>
		<th rowspan=2>Porte avant</th> 
		<th rowspan=2> Porte arrière </th> 
		<th rowspan=2>kVA</th> 
		<th colspan="2">Arrivées 16A</th>
		<th colspan="2">Arrivées 32A</th> 
		<th colspan="2">Arrivées 63A</th>
	</tr>
	<tr style="text-align: center; vertical-align: middle;" >
		<td></td>
		<td><b>T</b></td>
		<td><b>CLES</b></td>
		<td><b>CODE</b></td>
		<td><b>QTE</b></td>
		<td><b>PDU</b></td>
		<td><b>QTE</b></td>
		<td><b>PDU</b></td>
		<td><b>QTE</b></td>
		<td><b>PDU</b></td>
	</tr>
	<tr>
		<td>1</td>
		<td>	<SELECT name="T" size="1">
					<OPTION>A
					<OPTION>B
					<OPTION>C
					<OPTION>D 
				</SELECT>
		</td>
		<td style="text-align: center; vertical-align: middle;" >
		<INPUT type= "radio" value="jour" name="1" checked>
		</td>	
		<td style="text-align: center; vertical-align: middle;" >
		<INPUT type= "radio" value="jour" name="1">
		</td>	
		<td> 	<SELECT style="text-align: center; vertical-align: middle;" name="Porte Avant" size="1">
					<OPTION>Ajournée
					<OPTION>Ajournée à 80%
					<OPTION>Pleine
				</SELECT>
		</td>
		<td> 	<SELECT style="text-align: center; vertical-align: middle;" name="Porte Avant" size="1">
					<OPTION>Ajournée
					<OPTION>Ajournée à 80%
					<OPTION>Pleine
				</SELECT>
		</td>
		<td>
		<input type="text"  size="5" style="text-align:center;" style="border-radius:5px;" name="kVA" placeholder="kVA" maxlength="7"/>
		</td>
		<td>
				<input type="text"  size="5" style="text-align:center;" style="border-radius:5px;" name="QTE16" placeholder="QTE" maxlength="7"/>
		</td>
		<td>	<SELECT name="PDU16" size="1">
					<OPTION>PDU Verticale (11 prises)
					<OPTION>PDU Horizontal (9 prises)
					<OPTION>PDU Intelligent (IP)
				</SELECT>	
		</td>
		<td>
				<input type="text"  size="5" style="text-align:center;" style="border-radius:5px;" name="QTE32" placeholder="QTE" maxlength="7"/>
		</td>
		<td>	<SELECT name="PDU16" size="1">
					<OPTION>PDU Verticale (11 prises)
					<OPTION>PDU Horizontal (9 prises)
					<OPTION>PDU Intelligent (IP)
				</SELECT>	
		</td>
		<td>
				<input type="text"  size="5" style="text-align:center;" style="border-radius:5px;" name="QTE63" placeholder="QTE" maxlength="7"/>
		</td>
		<td>	<SELECT name="PDU16" size="1">
					<OPTION>PDU Verticale (11 prises)
					<OPTION>PDU Horizontal (9 prises)
					<OPTION>PDU Intelligent (IP)
				</SELECT>	
		</td>
	</tr>
</table>
 
</body>
 
</html>

On ne doit pas lire de la même façon ...

Dans la page du premier lien moi je vois une fonction:

Code:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function AddRow(){
    var newRow = document.getElementById('table').insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = '[nouvelle cellule 0]';
    newCell = newRow.insertCell(1);
    newCell.innerHTML = '[nouvelle cellule 1]';
}
</script>

Je sais lire et j'ai analysé ce bout de code.

Mais je crois que j'arrive pas à expliquer mon problème..

Ma question concrètement :

Dans ce bout de code par exemple:
Code:

1 2 3 4 5 6 7 function AddRow(){ var newRow = document.getElementById('table').insertRow(-1); var newCell = newRow.insertCell(0); newCell.innerHTML = '[nouvelle cellule 0]'; newCell = newRow.insertCell(1); newCell.innerHTML = '[nouvelle cellule 1]'; }
A chaque ajout de ligne, il ajoute '[nouvelle cellule 0]' et '[nouvelle cellule 1]'. Est ce qu'il est possible de mettre dans le code javascript, a la place de '[nouvelle cellule 0]'; et '[nouvelle cellule 1]' le code de mon tableau avec mes boutons radios etc. ?

Merci de votre patience lol

25/01/2013, 16h25
SpaceFrog

Code:

newCell.innerHTML = '[nouvelle cellule 0]';

Tu ne fais pas le rapprochement avec le contenu de la cellule ???
25/01/2013, 16h38
sass92

Euh pas vraiment.
Je sais pas comment faire pour que mon code html remplace "[nouvelle cellule 0]"..
Je vois bien que si je met autre chose a la place, la nouvelle ligne affiche ce que j'ai mis, mais pour mettre des choses plus spécifiques comme mon tableau je ne vois pas.. En tout cas je connais pas la syntaxe à utiliser..
25/01/2013, 16h45
SpaceFrog

si tu veux ajouter une ligne complète du même type que les lignes précédentes, le mieux est encore de regarder du coté de cloneNode() pour cloner une ligne et en faire un append() ou inserftAfter()
25/01/2013, 16h48
sass92

D'accord, je vais aller fouiller dans ce sens là !
Merci de ton aide !