[JS] Cacher les lignes d'un tableau

Marsh Posté le 12-03-2008 à 18:31:34

Bonjour,
je souhaite cacher/afficher les lignes d'un tableau contenant pas mal de ligne.
La méthode que j'utilise me permet seulement de cacher une ligne :

Code :

<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>

(...)

Code :

<p><a href="#" onclick="switchMenu('regional')";>afficher</a></p>

et ensuite je défini une encre sur une ligne :

Code :

]
<tr id="regional" class="classregional">

ca marche bien mais le problème se pose pour plusieurs lignes, sachant que l'id est unique. J'ai tenté via ByClassName mais sans réussite (je suis légé en js...).

Merci !

Message édité par endozen le 12-03-2008 à 18:33:45

---------------
EOS 5D mk II | 17-40 f/4 L USM | 50 f/1.4 USM | 135 f/2 L USM

Reply

Marsh Posté le 12-03-2008 à 18:31:34

Reply

Marsh Posté le 12-03-2008 à 19:15:41

Bah fait une boucle sur le tableau

Code :

var table = document.getElementById("IdDuTableauDontTuVeuxCacherCertainesLignesMaisPasToutes" )
 
for (var i = 0; i < table.rows.length; i ++)
{
    var row = table.rows[i]
 
    if (row.className.indexOf("classregional" ) >= 0)
        row.style.display = (row.style.display == "none" ? "" : "none" )
}

Pas testé.

Reply

Marsh Posté le 12-03-2008 à 19:26:59

merci beaucoup tpierron, j'ai pas le temps de tester ce soir, mais je te donnes des nouvelles demain!

c'est quand même dommage que la fonction getElementsByClassName n'existe pas. Ca serait un gain de temps certain!

---------------
EOS 5D mk II | 17-40 f/4 L USM | 50 f/1.4 USM | 135 f/2 L USM

Reply

Marsh Posté le 12-03-2008 à 20:18:45

je ne comprends pas la ligne 7, peux tu m'en dire plus ? merci

---------------
EOS 5D mk II | 17-40 f/4 L USM | 50 f/1.4 USM | 135 f/2 L USM

Reply

Marsh Posté le 12-03-2008 à 21:04:31

row.className => valeur de l'attribut class
row.className.indexOf => recherche la sous-chaine dans la chaine. Renvoie la position ou -1 si non trouvée.
C'est donc le filtre pour ton getElementsByClassName

Tu me diras, pourquoi pas faire plus simplement :

Code :

if (row.className == "classregional" )

Parce que si tu spécifies plus d'une classe pour ton élément, ce test ne fonctionnera pas.

Message édité par tpierron le 12-03-2008 à 21:05:02

Reply

Marsh Posté le 12-03-2008 à 21:49:02

Code :

<style>
.transport_regional {
background-color: #DBDBDB;
}
.transport_national {
background-color: #EBEBEB;
border: thin solid #006699;
}
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test java</title>
</head>
<script type="text/javascript">
<!--
var table = document.getElementById("transport_tableau" )
for (var i = 0; i < table.rows.length; i ++)
{
var row = table.rows[i]
if (row.className == "transport_regional" )
row.style.display = (row.style.display == "none" ? "" : "none" )
}
//-->
</script>
<body>
<table id="transport_tableau">
<tr class="transport_regional">
<td>test</td>
<td>test</td>
<td>test</td>
<tr class="transport_national">
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</body>
</html>

voilà le code simplifié, la méthode ne marche pas malheureusement...

Message édité par endozen le 12-03-2008 à 21:49:21

---------------
EOS 5D mk II | 17-40 f/4 L USM | 50 f/1.4 USM | 135 f/2 L USM

Reply

[JS] Cacher les lignes d'un tableau

Sujets relatifs:

Leave a Replay