cacher des lignes d'un tableau

**solicel** · 29/09/2009, 15h58

Bonjour,
Apres des heures de recherche je décide 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:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
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 = ''; 
        } 
    } 
}

en fait le problème est au niveau de la comparaison:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 cache/ré-affiche la ligne entière selon son état actuel.
Puisque maintenant il cache /ré-affiche toutes les lignes du tableau, cela veut dire qu'il n'arrive pas a vérifier si le mot clé est dans la ligne ou pas.
j'utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.toString()

pour transformer l'objet en string, ensuite

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

indexOf()

pour savoir si le mot clé (rel) existe ou pas dans la ligne en regardant la valeur de retour.
Je vous remercie d'avance.

**SpaceFrog** · 29/09/2009, 17h13

a priori si je comprends bein le texte recherché est contenu dans les cellules du tr ...
donc dans des td
il faudrait faire une boucle sur les td du tr pour par exemple faire un test sur au moyen d'une expression régulière ...
Sir le teste est positif il suffit de modifier le style display du parent du td ...

Un raccourci permettrait de le faire sur le innerHTML du tr mais la recherche s'appliquerait aussi sur les attributs des balises td ...

un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script type="text/javascript">
 
function hide(word){
 var reg=new RegExp(word,'gi')
 var lignes=document.getElementById('tabl').getElementsByTagName('tr');
 var i=0;
 
 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++;}
    lignes[i].style.display=found?'none':'block';
   i++;
   }          
 
   }
 </script>
</head>
 
<body>
<table id="tabl">
	<tr>
		<td>oui </td>
		<td>oui </td>		
	</tr>
	<tr>
		<td>non </td>
		<td>non </td>		
	</tr>
	<tr>
		<td>oui </td>
		<td>noir </td>		
	</tr>
	<tr>
		<td>non </td>
		<td>bleu </td>		
	</tr>
</table>		
<input id="mot" type='text' />
<input type="button" onclick="hide(document.getElementById('mot').value)" value='go' />
 
 
</body>

**solicel** · 29/09/2009, 18h33

Merci beaucoup SpaceFrog!
C'est exactement ca le probleme, et voila le script final, qui une fois appelé avec un certain mot clé, cache toutes les lignes saufs celles contenant ce mot clé, et, si appelé encore avec le meme mot clé, affiche tout le tableau.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
function show(word)
{
	var reg=new RegExp(word,'gi')
	var lignes=document.getElementById('tablecontainer').getElementsByTagName('tr');
	var i=0;
	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++;
	}
}

Merci encore une fois pour toi spaceforg, mais j'ai une question supplémentaire pour toi

: c'est quoi l'autre règle du succès?

cacher des lignes d'un tableau

JavaScript

Discussions similaires

Partager

Partager