Html & Javascript

**sass92** · 24/01/2013, 17h59

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.

**SpaceFrog** · 24/01/2013, 18h37

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

**sass92** · 25/01/2013, 10h58

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

**sass92** · 25/01/2013, 15h14

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

**SpaceFrog** · 25/01/2013, 15h19

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

**sass92** · 25/01/2013, 15h23

Merci beaucoup ! C'est gentil !

**sass92** · 25/01/2013, 15h43

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 :

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

**SpaceFrog** · 25/01/2013, 16h06

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

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

**sass92** · 25/01/2013, 16h16

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**SpaceFrog** · 25/01/2013, 16h25

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Tu ne fais pas le rapprochement avec le contenu de la cellule ???

**sass92** · 25/01/2013, 16h38

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

**SpaceFrog** · 25/01/2013, 16h45

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

**sass92** · 25/01/2013, 16h48

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

Html & Javascript

JavaScript

Discussions similaires

Partager

Partager