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