[JS] Cacher les lignes d'un tableau

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JS] Cacher les lignes d'un tableau

endozen

Endorsen

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

Publicité

tpierron

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é.

endozen

Endorsen

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

endozen

Endorsen

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

tpierron

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

endozen

Endorsen

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

FORUM HardWare.fr

Programmation

HTML/CSS

[JS] Cacher les lignes d'un tableau

Sujets relatifs
tableau et couleur	Tableau à dimension variable
Probléme de copie de tableau et d'affichage	comment passer une ligne csv en tableau a deux dimensons ? en AWK ?
Modifier valeur champ tableau	sprinft a base de tableau
tableau d'une chaine de caractere	probleme tri par fusion de tableau
Fond cellule tableau	Récupérer des données de word pour les archiver dans un tableau excel
Plus de sujets relatifs à : [JS] Cacher les lignes d'un tableau

Page générée en 0.059 secondes