manipuler un tableau <table> </table>

**faico** · 06/07/2006, 12h00

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

**FremyCompany** · 06/07/2006, 12h08

Ebauche :

Code :

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

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

**faico** · 06/07/2006, 12h15

salam,
j'ai pas compris votre solution?

**FremyCompany** · 06/07/2006, 12h21

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

**faico** · 26/08/2006, 21h58

Salam,
Merci !

**javatwister** · 27/08/2006, 09h51

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

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

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

manipuler un tableau <table> </table>

JavaScript

Discussions similaires

Partager

Partager