Compter et parcourir les lignes d'un tableau HTML "dynamique"

**symfonyc** · 09/08/2012, 14h36

Bonjour à tous,

existe-t-il un moyen de compter et parcourir les lignes d'un tableau, tel qu'il est affiché à l'écran ? (et non tel qu'il se présente dans le code source).

J'ai en fait un tableau dont le nombre de lignes évolue en fonction des actions de l'utilisateur ; je sais compter et parcourir les lignes d'un tableau, mais le nombre de lignes retourné reste fixe (égal au nombre de lignes du tableau complet) et ne correspond pas au nombre de lignes effectivement affichées à l'écran.

--------------------------------------------------

Pour plus de détails, voici mon script et mes essais :

J'ai un tableau assez long et j'utilise une fonction de filtrage (tirée d'ici) :

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
 
function filter2 (phrase, _id){
	var words = phrase.value.toLowerCase().split(" ");
	var table = document.getElementById(_id);
	var ele;
	for (var r = 1; r < table.rows.length; r++){
		ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
	        var displayStyle = 'none';
	        for (var i = 0; i < words.length; i++) {
		    if (ele.toLowerCase().indexOf(words[i])>=0)
			displayStyle = '';
		    else {
			displayStyle = 'none';
			break;
		    }
	        }		
		table.rows[r].style.display = displayStyle;
	}
}

Le filtre fonctionne très bien. Cependant je voudrais pouvoir le compléter d'une autre fonction qui :

Compte le nombre de lignes du tableau une fois filtré
Applique une couleur de fond alternée

(mon deuxième point étant dû au fait que les lignes de mon tableau avant filtrage possèdent une couleur de fond alternée ; une fois le filtre appliqué, je peux donc me retrouver avec deux (ou plus) lignes consécutives avec la même couleur de fond).

Pour le premier point : je sais récupérer le nombre de lignes d'un tableau via un

Code :

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

document.getElementById('monTableau').rows.length;

mais la valeur correspond toujours au nombre de lignes avant filtrage.

Je peux cependant récupérer le nombre "réel" de lignes en ajoutant un compteur dans la fonction de filtre directement :

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
function filter2 (phrase, _id){
	var words = phrase.value.toLowerCase().split(" ");
	var table = document.getElementById(_id);
	var ele;
	compteLigne = 0 ;

	for (var r = 1; r < table.rows.length; r++){
		ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
		var trouve = true;

	        var displayStyle = 'none';
	        for (var i = 0; i < words.length; i++) {
		    if (ele.toLowerCase().indexOf(words[i])>=0)
			displayStyle = '';
		    else {
			trouve = false;
			displayStyle = 'none';
			break;
		    }
	        }
	        if (trouve) {				
			compteLigne++;
		}	
		table.rows[r].style.display = displayStyle;
		document.getElementById('afficheNombreLignes').innerHTML=compteLigne;
	}
}

Même si cela marche j'aimerais savoir s'il est possible d'obtenir cette valeur directement, notamment car je souhaite la récupérer dans une fonction externe au filtre.

Pour le deuxième point c'est un peu plus délicat, je n'arrive pas à parcourir uniquement les lignes affichées pour ne colorer que celles-ci. Existe-t-il un moyen de faire cela ?

Si non, j'ai essayé de réaliser cela directement dans le filtre, mais j'obtiens une coloration qui ne correspond pas à ce que la fonction est (je pense mais je dois me tromper quelque part

) est sensée faire :

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
 
function filter (phrase, _id){
		var words = phrase.value.toLowerCase().split(" ");
		var table = document.getElementById(_id);
		var ele;
 
		var couleurDeFond1 ="red";
		var couleurDeFond2 ="green";
		var couleurDeFond = couleurDeFond2;
 
		compteLigne = 0 ;
 
		for (var r = 1; r < table.rows.length; r++){
			ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
			var trouve = true;
		        var displayStyle = 'none';
		        for (var i = 0; i < words.length; i++) {
			    if (ele.toLowerCase().indexOf(words[i])>=0){
				displayStyle = '';
				}				
			    else {
				trouve = false;
				displayStyle = 'none';
				break;
			    }
		        }
 
			if (trouve) {
				table.rows[r].style.backgroundColor = couleurDeFond;				
				couleurDeFond = couleurDeFond1;
				couleurDeFond1 = couleurDeFond2;
				couleurDeFond2 = couleurDeFond;
				compteLigne++;
			}			
			table.rows[r].style.display = displayStyle;
			document.getElementById('afficheNombreLignes').innerHTML=compteLigne;
 
		}
	}

et donc la coloration ne s'opère pas en alternance comme attendu.

D'où ma question sur la possibilité de parcourir un tableau tel qu'il se présente à l'écran, et non dans son intégralité tel qu'il est dans le code source.

Merci d'avance pour vos réponses ou suggestions !

**Bovino** · 09/08/2012, 14h41

Non, JavaScript permet de récupérer le nombre de lignes d'un tableau, mais tel qu'il apparait dans le code source, pas tel qu'il apparait à l'écran.

Pour cela, tu devras parcourir ton tableau et déterminer toi-même si la ligne est visible ou non.

**symfonyc** · 10/08/2012, 15h14

Merci pour cette réponse claire.

Finalement le script modifié comme expliqué dans mon premier message fonctionne et me permet de compter les lignes affichées, et d'appliquer un fond alterné aux lignes affichées à l'écran

(pour ceux que ça intéresse : le problème venait de la double gestion en css et en javascript de l'alternance des couleurs ; au final j'ai supprimé le passage en css qui permettait cette alternance (sélecteur nth-child), et je gère ça entièrement en js, que ce soit au chargement de la page puis à l'exécution du filtre).

Seul défaut, si le js est désactivé, les couleurs ne sont plus alternées au chargement de la page, mais bon, ça reste accessoire...