Afficher/Masquer cellule d'un tableau

**SIILILLE** · 12/05/2007, 14h45

Bonjour, je vous sollicite à travers le forum puisque j'ai un petit soucis pour la réalisation d'un site web pour lequel j'aurais besoin d'un tableau avec des cellules que je pourrais masquer/afficher à partir d'un bouton.
Je suis parvenu à réaliser un code mais ne passant pas sur tous les navigateurs (Firefox par exemple), j'ai essayé de résoudre le problème mais en vain (je sais que le problème vient par exemple de srcElement (target pour Firefox), ...)

Ci-dessous, le code original en espérant que vous saurez l'adapter pour que chaque navigateur puisse le lire!
Merci

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.vis {
	display: inline;
}
.invis {
	display: none;
}
-->
</style>
</head>
 
<body>
<table width="100%" border="2" cellspacing="2" cellpadding="1" onClick="affiche()">
  <tr>
    <td width="12%"><input id="1" type="submit" name="Submit" value="Lire"></td>
    <td width="88%">Article 1</td>
  </tr>
  <tr>
    <td colspan="2" class="invis" id="art1">texte 1</td>
  </tr>
  <tr>
    <td><input id="2" type="submit" name="Submit" value="Lire"></td>
    <td>Article 2</td>
  </tr>
  <tr>
    <td colspan="2" class="invis" id="art2">texte 2</td>
  </tr>
  <tr>
    <td><input id="3" type="submit" name="Submit" value="Lire"></td>
    <td>Article 3</td>
  </tr>
  <tr>
    <td colspan="2" class="invis" id="art3">texte 3</td>
  </tr>
</table>
</body>
 
<script language="JavaScript" type="text/javascript">
function affiche() {
x=window.document.getElementById("art"+window.event.srcElement.id);
if (window.event.srcElement.tagName=="INPUT")
{
if (x.className=="vis"){x.className="invis";} else { x.className="vis";}
 
}
}
</script>
 
 
</html>

**Auteur** · 12/05/2007, 15h33

bonjour,

un code un peu plus simple :

Code html :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function CacheLigne()
{
 var eTab = document.getElementById("tab")
 eTab.rows[1].style.display="none";
}
function MontreLigne()
{
 var eTab = document.getElementById("tab")
 eTab.rows[1].style.display="";//bug CSS ne pas utiliser la valeur block
}
//-->
</script>
 
</head>
 
<body>
<table id="tab" border="1">
  <tr>
    <td>ligne 1
    </td>
  </tr>
  <tr>
    <td>ligne 2
    </td>
  </tr>
  <tr>
    <td>ligne 3
    </td>
  </tr>
</table>
<input type="button" value="Cache"  onclick="CacheLigne()">
<input type="button" value="Montre"  onclick="MontreLigne()">
 
</body>
 
</html>

**Gatsu35** · 13/05/2007, 02h52

Envoyé par Auteur

function MontreLigne()
{
var eTab = document.getElementById("tab")
eTab.rows[1].style.display="";//bug CSS ne pas utiliser la valeur block
}
[/code]

Code :

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

1
2
3
4
5
6
function MontreLigne()
{
 var eTab = document.getElementById("tab")
 eTab.rows[1].style.display="";//bug CSS ne pas utiliser la valeur block
}

Heu accessoirement ce n'est pas du tout un bug, tu as déjà vu un TR avec un display block ou inline ? moi nan
le display par défaut d'un TR est "table-row", donc foutre un display:block au TR lui donne un comportement totalement différent.
Et accessoirement ya que IE qui accepte le display:block pour les table, tbody et tr, IE de mes fesses

Afficher/Masquer cellule d'un tableau

JavaScript

Discussions similaires

Partager

Partager