High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

JavaScript cacher des lignes d'un tableau

Dernière réponse le 30 sep 2009 à 13:50:11 solicel, le 29 sep 2009 à 04:35:57 
 Signaler ce message aux modérateurs

Bonjour,
Apres des heures de recherche je decide de vous exposer mon probleme :)
Il s'agit d'une page web qui contient un tableau initialement tout affiché, et que je veux choisir les lignes a afficher ou a cacher de la maniere suivante:
Un autre tableau contenant la liste des mots-clés, qui a chaque fois qu'on clique sur une de ses lignes, la fonction JavaScript "show" cherche les les lignes dans le tableau principal toutes les lignes contenant ce mot clé et les affiche.
Voici ma fonction:


<script type="text/javascript">

function show(rel)
{
table = document.getElementById('tablecontainer').getElementsByTagName('TR')
for (l=0;l<table.length;l++)
{
if(table[l].toString().indexOf(rel)<0)
{
if(table[l].style.display == '') table[l].style.display = 'none';
else table[l].style.display = '';
}
}
}

</script>

C'est la ligne if(table[l].toString().indexOf(rel)<0) qui cause les problemes, pourtant quand je clique sur un mot clé tout le tableau principal se cache/se réaffiche.
Que faire?
Merci beaucoup.

Configuration: Linux
Safari 532.1

Meilleures réponses pour « JavaScript cacher des lignes d'un tableau » dans :
Javascript - Connaître la hauteur d'un élément HTML VoirSi vous souhaitez connaître la hauteur (height) d'un bloc HTML en javascript, il existe deux façons selon les navigateurs : element.offsetHeight element.style.pixelHeight Ainsi, le code suivant permet d'obtenir la hauteur d'un bloc HTML...
Remplir une ligne ou une colonne avec une suite logique VoirVous devez créer un tableau avec le nom des mois dans une ligne ou une colonne : - vous inscrivez au moins 2 mois consécutifs : par exemple, janvier en B4 et février en B5 - vous pointez sur B4, puis en maintenant shift enfoncé, vous pointez B5. ...
Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...
Javascript - Les tableaux VoirIntroduction à la notion de tableau Les variables de Javascript ne permettent de stocker qu'une seule donnée à la fois. Or, étant donné qu'il est souvent utile de manipuler de nombreuses données, le concept de variable se révéle parfois...
Les tableaux en langage C++ VoirType de données complexes Les variables, telles que nous les avons vues, ne permettent de stocker qu'une seule donnée à la fois. Or, pour de nombreuses données, comme cela est souvent le cas, des variables distinctes seraient beaucoup trop lourdes...
Posez votre question Répondre

1

113pictural, le 29 sep 2009 à 04:45:41

Bonjour, je ne puis vous répondre pour le javascript. Cependant, c'est très certainement faisable en .css, en créant autant de classes qu'il y a de listes de mots à mettre en surlignage. Disons que ce sera à essayer la prochaine fois ...

Désolé pour cette fois.

   
Répondre à 113pictural

2

solicel, le 29 sep 2009 à 05:12:42

Merci 113pictural,
C'est très gentil de ta part,.
et drôle aussi :D

   
Répondre à solicel

3

solicel, le 29 sep 2009 à 15:50:34

Alors personne ne répond?
Je croyais que c'est banal.
en fait le problème est au niveau de la comparaison: if(table[l].toString().indexOf(rel)<0) qui sert a déterminer si le mot clé est inclus dans la ligne ou pas. S'il l'est, il le laisse toujours affiché, sinon il le cache/ré-affiche selon son état actuel.
Puisque maintenant il cache /ré-affiche toutes les lignes, cela veut dire qu'il n'arrive pas a vérifier si le mot clé est dans la ligne ou pas.
j'utilise .toString() pour transformer l'objet en string, ensuite indexOf pour savoir si le mot clé (rel) existe ou pas.
Alors, cela ne vous dit rien?

   
Répondre à solicel

4

 solicel, le 30 sep 2009 à 13:50:11
  • +1

J'ai trouvé la solution, je la publie en espérant qu'elle aidera quelqu'un un jour.
L'astuce consiste a faire une autre boucle pour chaque ligne, pour récupérer les <td> exactement comme on a fait pour les <tr>... c'est presque tout!
Voici le bout du code:



function show(word)
{
var reg=new RegExp(word,'gi')
var lignes=document.getElementById('tablecontainer').getElementsByTagName('tr');
var i=1;
while(lignes[i])
{
var found=false
var cells=lignes[i].getElementsByTagName('td');
var j=0;
while(cells[j])
{
if(cells[j].innerHTML.match(reg)){found=true;}
j++;
}
if(!found)
{
if( lignes[i].style.display == '') lignes[i].style.display = 'none';
else lignes[i].style.display = '';
}
i++;
}
}

   
Répondre à solicel
Posez votre question Répondre