Afficher/Masquer cellule d'un tableau
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:
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> |
