Rendre une colonne invisible en javascript

Version imprimable

salut,

j'essaie en javascript de rendre une colonne d'un tableau invisible. avec une ligne pas de probleme, ca marche bien :
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 <html> <head> <script type="text/javascript"> function hideIt() { document.getElementById("col2").style.visibility="collapse"; } </script> </head> <body> <table border='1'> <tr id='col2'> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>_1</td> <td>_2</td> <td>_3</td> <td>_4</td> </tr> <tr> <td>1_</td> <td>2_</td> <td>3_</td> <td>4_</td> </tr> </table> <form> <input type="button" onclick="hideIt()" value="Hide"> </form> </body> </html>
mais les colones je n'arrive pas a les cacher. si vous avez une idée, je suis preneur :D

merci

06/11/2008, 17h26
SpaceFrog

une boucle avec pour depart le nr de la colonne concernée, un step egal au nombre de colonne, et cette boucle scanne la collection des td pour les basculer en display:none

piste

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
<html>
	<head>
		<script>
function load(){
	var table = document.getElementById("maTable");
	if (table.attachEvent){
		table.attachEvent("onclick",toggle);
	}
	else{
		table.addEventListener("click",toggle,false);
	}
}
 
function toggle(e){
	var i = 0;
	var rows = document.getElementById("maTable").rows;
	while(rows[i]){
		var style = rows[i].cells[1].style;
		style.display = style.display=="none" ? "block" : "none";
		i++;
	}
}
 
(function(){
	if (window.attachEvent){
		window.attachEvent("onload",load);
	}
	else{
		window.addEventListener("load",load,false);
	}
})();
		</script>
	</head>
	<body>
			<table id="maTable">
				<tr>
					<td>un tableau 1</td>
					<td>un tableau 2</td>
					<td>un tableau 3</td>
				</tr>
				<tr>
					<td>un tableau 1</td>
					<td>un tableau 2</td>
					<td>un tableau 3</td>
				</tr>
				<tr>
					<td>un tableau 1</td>
					<td>un tableau 2</td>
					<td>un tableau 3</td>
				</tr>
				<tr>
					<td>un tableau 1</td>
					<td>un tableau 2</td>
					<td>un tableau 3</td>
				</tr>
				<tr>
					<td>un tableau 1</td>
					<td>un tableau 2</td>
					<td>un tableau 3</td>
				</tr>
				<tr>
					<td>un tableau 1</td>
					<td>un tableau 2</td>
					<td>un tableau 3</td>
				</tr>
			</table>
	</body>
</html>