Javascript cacher des lignes d'un tableau html

07 janv. 2009, 18:23

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

07 janv. 2009, 20:11

Pour cacher un objet identifié par un id La bonne syntaxes est

Code : Tout sélectionner

document.getElementById('test').style.display = 'none';

Dans ton cas défini plutôt une class pour tes lignes à cacher et utilise ensuite ClassName en JS pour les cacher.

08 janv. 2009, 10:44

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

08 janv. 2009, 11:57

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

08 janv. 2009, 12:50

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';

08 janv. 2009, 13:08

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 ?

09 janv. 2009, 01:51

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'

09 janv. 2009, 02:31

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.

09 janv. 2009, 19:39

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

Merci

guigui69

28 sept. 2011, 18:34

Merci pour le post

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

Merci

Javascript cacher des lignes d'un tableau html

Qui est en ligne