Page 1 sur 1
Javascript cacher des lignes d'un tableau html
Posté : 07 janv. 2009, 18:23
par guigui69
Bonjour à tous,
je voudrais savoir quel méthode je doit utiliser pour cacher une ligne de mon tableau (tr)
(
http://www.phpfrance.com/forums/voir_reponse-274976.php)
j'ai attribué un id au tr (exemple: nom_scritere_$nb)
je voudrait savoir en javascript il possible de faire de changer le style:display dans tout les ID nom_scritere_XX (correspond a un nombre que ne connait pas).
Code : Tout sélectionner
function check_selection(id_qt_audit)
{
test= id_qt_audit;
alert('test='+test);
document.getElementById(test+'['?????']').style.display == '';
}
Ou bien exits-il une autre technique pour cacher les lignes d'un tableau?
Merci d'avance
guigui69
Posté : 07 janv. 2009, 20:11
par AB
Pour cacher un objet identifié par un id La bonne syntaxes est
Dans ton cas défini plutôt une class pour tes lignes à cacher et utilise ensuite ClassName en JS pour les cacher.
Posté : 08 janv. 2009, 10:44
par guigui69
Oups En fait c'est l'inverse.
Je les ai tous mis en cacher au depart et je voudrait les montrer:
Code : Tout sélectionner
function check_selection(id_qt_audit)
{
test= id_qt_audit;
alert('test='+test);
//document.getElementById(test+'['+#+']').style.display == '';
(1) alert('document.getElementsByClassName('+test+').style.display = \'');
document.getElementsByClassName(test).style.display = '';
}
error:
Code : Tout sélectionner
document.getElementsByClassName(test).style is undefined
[Break on this error] document.getElementsByClassName(test).style.display = '';
Quand je fait alert (1) il me mets bien "document.getElementsByClassName('+ICI le nomdu trconcerné+').style.display = \''.
Quel erreur est-je commis dans mon code?
Merci
guigui69
Posté : 08 janv. 2009, 11:57
par guilt92
Bonjour,
Il faut que tu spécifies une valeur à display, pas vide
Exemple :
document.getElementsByClassName(test).style.display = 'block';
Après si c'est dans un tableau ca peut etre différentes valeurs, inline-table ou table-row par exemple...
Les différentes valeurs possible ici
Posté : 08 janv. 2009, 12:50
par guigui69
même en rajoutant un paramètre a display il me retourne toujours
Code : Tout sélectionner
document.getElementsByClassName(test).style is undefined
document.getElementsByClassName(test).style.display = 'block';
Posté : 08 janv. 2009, 13:08
par guilt92
Oups désolé j'avais lu un peu vite et j'avais vu un getElementById alors que c'est getElementsByClassName que tu utilises... Cette fonction n'existe pas d'ailleurs à ma connaissance... Qu'est ce ? Ca donne quoi avec un getElementById à la place ?
Posté : 09 janv. 2009, 01:51
par AB
Effectivement getElementsByClassName est un peu avant gardiste puisqu'il vient juste d'être implémenté dans safari et peut être firefox mais IE attendra la version 8.
Donc la piste className ne t'apportera rien de plus dans ce cas que document.getElementById(id).style.display = 'none'

Posté : 09 janv. 2009, 02:31
par AB
Cela dit si tes id sont incrémentés + 1 pour chaque ligne tu peux faire simplement
Code : Tout sélectionner
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<style type="text/css">
.cache{
display:none;
}
</style>
<script type="text/javascript">
function affiche(i) {
var i = (typeof i == 'number')? i : 0;
var id = 'nom_scritere_'+i;
if (this.tr = document.getElementById(id))
{
this.tr.style.display = 'inline';
i++;
affiche(i);
}
}
</script>
</head>
<body>
<table>
<tr><td>Permière ligne</td></tr>
<tr id="nom_scritere_1" class="cache"><td>Deuxième ligne qui apparaîtra onclick sur le bouton</td></tr>
<tr><td>Troisième ligne</td></tr>
<tr id="nom_scritere_2" class="cache"><td>Quatrième ligne qui apparaîtra onclick sur le bouton</td></tr>
<tr><td>Cinquième ligne</td></tr>
</table>
<input type="button" value="fait apparaître les lignes cachées" onclick = "affiche(1)"/>
</body>
</html>
La fonction s'arrête dès que l'id en cours ou suivant n'existe pas.
Ici j'ai passé 1 comme argument dans l'appel onclick à la fonction affiche() puisque j'ai commencé l'incrémentation des lignes à 1 et que j'ai défini var i = 0 par défaut dans cette même fonction.
Posté : 09 janv. 2009, 19:39
par guigui69
Merci, je posterait ce que j'ai fait lundi ca l'air de fonctionner
Merci
guigui69
Re: Javascript cacher des lignes d'un tableau html
Posté : 28 sept. 2011, 18:34
par bdbdfb
Merci pour le post

Merci, je posterait ce que j'ai fait lundi ca l'air de fonctionner
Merci