Bonjour, 

Je souhaite ajouter un filtre sur un tableau lorsque je clique sur des boutons. 

J'ai un tableau affichant des lignes avec une colonne de jour contenant les jours d'horaires et des boutons au-dessous contenant les jours de la semaine.

Je voudrais qu'en cliquant sur lundi, seulement les lignes Lundi soient affichées. 

Mon code marche lorsque je rentre un jour spécifique dans ma fonction (e.g. tab_day[0], cf code) mais pas lorsque j'utilise la boucle. 

Je pense que c'est parce que le display est mis à "" lorsque la condition est remplie (e.g. LUNDI, LUNDI) mais ensuite lorsque la boucle commence pour mardi, la condition n'était pas remplie, le display repasse en "none". 

Ce qui m'étonne c'est que je ne clique sur aucun bouton que les lignes sont déjà toutes avec le display 'none'...

Comment pourrais-je faire pour résoudre ce soucis ? 

Voici mon code : 

var tab_day = document.querySelectorAll('[id ^= "tab-"]');

                for (i = 0; i < tab_day.length; ++i) {
                    console.log(tab_day[i])
                    tab_day[i].addEventListener('click', filterDaysOnTable(tab_day[i]));
                }
                function filterDaysOnTable(tab_day) {
                    var  filter, table, tr, td, i, txtValue;
                    filter = tab_day.innerText.toUpperCase();
                    table = document.getElementById("schedules_table");
                    tr = table.getElementsByTagName("tr");
                    for (i = 0; i < tr.length; i++) {
                        td = tr[i].getElementsByTagName("td")[0];
                        if (td) {
                            txtValue = td.firstChild.value.substring(2);
                            console.log(filter); //LUNDI,MARDI,MERCREDI,...
                            console.log(txtValue.toUpperCase());//LUNDI//MARDI//MERCREDI
                            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                                console.log(tr[i])
                                tr[i].style.display = "";
                            }
                            else {
                                tr[i].style.display = "none";
                            }
                        }
                    }
                }

Merci :) 

P.S. : Si jamais je devais me faire incendier pour ma question, pourriez-vous me dire quoi lire pour m'améliorer sur le sujet ? 

-
Edité par PaxB 23 septembre 2021 à 22:52:07