Cacher ligne de tableau avec 2 cellules

**swissmade** · 12/07/2008, 15h18

bonjours,

voici mon code js:

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
<script type="text/javascript">
function show_form(){
	hide_form();
	var Tpe = document.getElementById("0").value;
 
	if (Tpe=="team"){
		document.getElementById("5").style.visibility="visible";
		document.getElementById("5").style.display="block";
 
	}
	else if (Tpe=="player"){
		document.getElementById("6").style.visibility="visible";
		document.getElementById("6").style.display="block";
	}
}
 
function hide_form(){
 
	document.getElementById("5").style.visibility="hidden";
	document.getElementById("5").style.display="none";
	document.getElementById("6").style.visibility="hidden";
	document.getElementById("6").style.display="none";
}
</script>

et mon code html:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<table width=100%>
		<tr><td>Vous cherchez: <br><br></td><td>
		<select name="type" onChange="show_form()" id="0">
		<option></option>
		<option name="team" value="team">Une &eacute;quipe</option>
		<option name="player" value="player">Un joueur</option>
		<option name="coach" value="coach">Un coach</option>
		<option name="agent" value="agent">Un agent</option>
		</select></td></tr>
		<tr id="5"><td>test1</td><td><input type="text" name="title" size=50%></td></tr>
		<tr id="6"><td>test2</td><td><input type="text" name="title" size=50%></td></tr>
<tr><td width=10%>Message: </td><td ><textarea name="content" cols=100% rows=35></textarea></td></tr>
<tr><td></td><td align="left"><input type="submit" value="Publier"></td></tr></table>

pas de promlème lors du onload ca cache bien les 2 ligne mais malheureusement lorsque je choisi team par exemple la ligne apparai bien mais s'affiche complètement décalé comme si tout la ligne ne se mettai que dans une seule cellule.

Que faire?

D'avance merci

EDIT:
en image
avant:

après:

Invité · 12/07/2008, 16h16

Salut,

Et comme ça:

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
 
<html>
<head>
<title></title>
<script type="text/javascript">
function show_form(){
	hide_form();
	var Tpe = document.getElementById("0").value;
 
	if (Tpe=="team"){
		//document.getElementById("5").style.visibility="visible";
		document.getElementById("5").style.display="";
 
	}
	else if (Tpe=="player"){
		//document.getElementById("6").style.visibility="visible";
		document.getElementById("6").style.display="";
	}
}
 
function hide_form(){
 
	//document.getElementById("5").style.visibility="hidden";
	document.getElementById("5").style.display="none";
	//document.getElementById("6").style.visibility="hidden";
	document.getElementById("6").style.display="none";
}
</script>
</head>
<body onload="hide_form()">
   <table width="100%" border="1">
		<tr>
            <td>Vous cherchez: <br><br>
            </td>
            <td>
        		<select name="type" onChange="show_form()" id="0">
            		<option></option>
            		<option name="team" value="team">Une &eacute;quipe</option>
            		<option name="player" value="player">Un joueur</option>
            		<option name="coach" value="coach">Un coach</option>
            		<option name="agent" value="agent">Un agent</option>
        		</select>
          </td>
        </tr>
		<tr id="5">
            <td>test1</td>
            <td><input type="text" name="title" size="50%"></td>
        </tr>
		<tr id="6">
            <td>test2</td>
            <td><input type="text" name="title" size="50%"></td>
        </tr>
        <tr>
            <td width="10%">Message: </td>
            <td ><textarea name="content" cols="100" rows="35"></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td align="left"><input type="submit" value="Publier"></td>
        </tr>
  </table>
</body>
</html>

a+

**Auteur** · 12/07/2008, 17h27

pour compléter ce qu'à écrit jlmag :
- Utilise soit l'attribut visibility ou display mais pas les deux.
- Les cellules ne sont pas des objets block comme les div par exemple. Donc il est préférable comme jlmag l'a écrit dans son code de faire :

Code :

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

1
2
 
document.getElementById("6").style.display="";

pour que la cellule prenne son style par défaut.

**swissmade** · 13/07/2008, 14h46

merci beaucoup a vous 2

Cacher ligne de tableau avec 2 cellules

JavaScript

Discussions similaires

Partager

Partager