manipuler un tableau <table> </table>

salam,
je veux lorsque je clique sur une ligne du tableau,
ke je recupere les information de toutes les cellules,
et les mettre dans un formulaire est ce qu'il ya une solution??

Ebauche :

Code:

1
2
3
4
5
FormHtmlElement.innerHTML=""
var AllInputs = TdHtmlElement.getElementsByTagName("INPUT")
for (var i=0;i<AllInputs.length;i++) {
   FormHtmlElement.appendChild(AllInputs[i].cloneNode(true))
}

salam,
j'ai pas compris votre solution?

Ben je regarde tous les INPUT (getElementsByTagName) qui se trouve dans une TD et je les copies (cloneNode & appendChild) dans un FORM...

Salam,
Merci !

en ajoutant une fonction au script que je t'ai donné sur ton autre topic:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<style type="text/css">
 
#TabAddRouleau {
border-collapse:collapse;
}
 
#TabAddRouleau th {
text-align:center;
border:1px #000000 solid;
background-color:#00ff00;
width:100px;
}
 
#TabAddRouleau td {
border:1px #ff0000 solid;
background-color:#ffff00;
}
 
</style>
 
 
 
 
</head>
 
<body>
 
<table id="TabAddRouleau">
	<tr>
		<th>un</th>
		<th>deux</th>
		<th>trois</th>
		<th>quatre</th>
	</tr>
</table>
 
 
<form id="f" action="">
 
<p>
<input type="text" name="rouleau" />
<input type="text" name="mr" />
<input type="text" name="chuteT" />
<input type="text" name="defaut" />
</p>
 
<p>
<input type="button" onclick="addr(this.form.elements)" value="ajouter la ligne" />
</p>
 
</form>
 
 
<script type="text/javascript">
 
var t=document.getElementById("TabAddRouleau").tBodies[0];
var tr, td;
 
function addr(f){
 
	tr=document.createElement("tr");
	for(i=0;i<4;i++){
		td=document.createElement("td");
		td.appendChild(document.createTextNode(f[i].value));
		tr.appendChild(td);
	}
 
	t.appendChild(tr);
	edit();
 
}
 
 
function edit(){
for(i=1;i<t.rows.length;i++){
	t.rows[i].onclick=function(){
		for(j=0;j<4;j++){
			document.getElementById("f").elements[j].value=this.cells[j].firstChild.data
		}
	}
}
}
</script>
 
 
</body>
</html>

bref, en cliquant sur une ligne, tu inverses le processus de départ; reste à ajouter des fonctions supprimer, déplacer... mais pour ça, on en a parlé la semaine dernière: (http://www.developpez.net/forums/sho...d.php?t=199508)

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
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
 
<style type="text/css">
 
 
#ta {
margin:100px;
padding:0px;
font-weight:bold;
border-collapse:collapse;
}
 
#ta td {
border:2px solid #000000
}
 
label {
font-weight:bold;
}
 
</style>
 
</head>
 
<body>
 
 
<table id="ta">
<tr>
	<td>un</td>
	<td>deux</td>
	<td>trois</td>
</tr>
<tr>
	<td>quatre</td>
	<td>cinq</td>
	<td>six</td>
</tr>
<tr>
	<td>sept</td>
	<td>huit</td>
	<td>neuf</td>
</tr>
<tr>
	<td>dix</td>
	<td>onze</td>
	<td>douze</td>
</tr>
<tr>
	<td>treize</td>
	<td>quatorze</td>
	<td>quinze</td>
</tr>
<tr>
	<td>seize</td>
	<td>dix-sept</td>
	<td>dix-huit</td>
</tr>
 
</table>
 
 
<p>
<label for="texte">Après avoir sélectionné une ligne, entrez le nouvel index choisi ou"sup"</label>
<input type="text" id="texte" size="2" />
</p>
 
 
<script type="text/javascript">
 
 
var txt=document.getElementById("texte");
var tb=document.getElementById("ta").tBodies[0];
var r=tb.rows;
 
var ind;
 
for(i=0;i!=r.length;i++){
	r[i].onclick=function(){
		if(ind){
			ind.style.backgroundColor="#ffffff"
		};
 
		ind=this;
		ind.style.backgroundColor="#ff0000";
	}
}
 
txt.onchange=function(){
	if(ind){
		if(r[this.value]){
			tb.insertBefore(ind,r[this.value])
		}
		else if(this.value>=r.length){
			tb.appendChild(ind)
		}
		else if(this.value=="sup"){
			if(confirm("Etes-vous sûr de vouloir supprimer cette ligne?")){
				tb.removeChild(ind)
			}
		}
	}		
}
 
 
</script>
 
</body>
</html>

charge les 2 contenus pour te rendre compte de ce que ça donne;