Compter et parcourir les lignes d'un tableau HTML "dynamique"
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:
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:
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:
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:
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 !
