Quel style pour un <td> ?

**SweetLeaf** · 30/07/2008, 10h54

Rebonjour !! (ça faisait longtemps !!)

Je vient de parcourir quelques forum et je vient de voir que le fait de mettre ça :

Code :

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

BaliseLigne2.style.display = "none";

ça faisait bugger parce que cette methode n'est pas faite pour les td mais pour les div...

J'ai essayer aussi visibility :

Code :

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

BaliseLigne2.visibility = false;

ou

Code :

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

BaliseLigne2.style.visibility="hide";

mais ca bugg et je ne suis pas sur du code...

Si quelqu'un pouvais m'indiquer le nom de la méthode que je doit employé ca serait super !! Merci d'avance !!

Invité · 30/07/2008, 11h54

Bonjour avec dans la balise td:

Code :

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

style="visibility: hidden;"

Pour ton cas:

Code :

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

BaliseLigne2.style.visibility = "hidden";

Pour compléter, voici un code avec le tableau

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
<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
</head>
<body>
 
<table >
  <tr onmouseover="this.style.backgroundColor = 'red'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td style="visibility: hidden;">cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'yellow'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>
 
</body>
</html>

IE7 => pas d'affichage de la couleur du "tr" pour la cellule cachée.
FF3 => affichage de la couleur du "tr" sur la cellule cachée

Et valide XHTML 1.0 Strict
A+

**SweetLeaf** · 30/07/2008, 12h00

je vais manger je te dit quoi vers 14h !!
Merci

Invité · 30/07/2008, 12h02

Bon déjeuné

**Auteur** · 30/07/2008, 12h13

Envoyé par SweetLeaf

Rebonjour !! (ça faisait longtemps !!)

Je vient de parcourir quelques forum et je vient de voir que le fait de mettre ça :

Code :

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

BaliseLigne2.style.display = "none";

ça faisait bugger parce que cette methode n'est pas faite pour les td mais pour les div...

Tu es sûr que le sujet ne portait pas plutôt sur l'affichage ou le masquage d'une ligne (tr) ?

Le style.display="none" fonctionne pour toutes les balises.

Cette propriété appliquée sur une ligne (tr):

Code :

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

BaliseLigne2.style.display = "block";

ne fonctionne pas effectivement.
Mais

Code :

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

BaliseLigne2.style.display = "none";

ne pose aucun souci (sur un tr).

Exemple :

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="";
}
//-->
</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" id="BNom" onclick="CacheLigne()">
<input type="button" value="Montre" id="BNom" onclick="MontreLigne()">
 
</body>
 
</html>

Invité · 30/07/2008, 12h22

Bonjour,

Attention, sous FF3 l'utilisation de "display: none;" cache bien la cellule mais crée un décalage que fait aussi IE7.

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
<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
</head>
<body>
 
<table >
  <tr onmouseover="this.style.backgroundColor = 'red'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td style="visibility: hidden;">cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'yellow'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td style="display: none;">cell</td>
    <td>cell</td>
  </tr>
</table>
 
</body>
</html>

Et c'est toujours valide XHTML 1.0 Strict

A+

**SweetLeaf** · 30/07/2008, 14h13

En fait le souci n'est pas vraiment sur le masquage ou non de la ligne car ça marche très bien... mais parce que ça fait bugger mon colspan que j'ai défini juste au dessus...

Si je ne masque pas ma ligne le colspan se fait si je la masque le colspan ne se fait pas et je ne comprend pas pourquoi...

**SweetLeaf** · 30/07/2008, 14h31

J'ai pas trouvé de solution je vais essayé d'affecté le colspan après avoir fait apparaitre la ligne.
Je vous tient au courant !!

Invité · 30/07/2008, 14h43

Re

et avec

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
<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
<style type="text/css">
/* <![CDATA[ */
table, tr, td {
 border-collapse: collapse;
}
 
/* ]]> */
</style>
<script type="text/javascript">
function show_tr() {
  document.getElementById('tr').style.display = (document.getElementById('tr').style.display == "none")? "" :"none";
}
</script>
</head>
<body>
 
<table >
  <tr onmouseover="this.style.backgroundColor = 'red'" onmouseout="this.style.backgroundColor = ''" onclick="show_tr()">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td style="visibility: hidden;">cell</td>
    <td>cell</td>
  </tr>
  <tr id="tr" style="display: none" onmouseover="this.style.backgroundColor = 'yellow'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>
 
</body>
</html>

CSS:

Code :

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

1
2
3
table, tr, td {
 border-collapse: collapse;
}

Ok?

A+

**SweetLeaf** · 30/07/2008, 14h54

C'est tout bonnement impeccable !!

Merci à tous !!

Quel style pour un <td> ?

JavaScript

Discussions similaires

Partager

Partager