Geckozone

Bonjour,
J'essaie d'écrire un petit javascript chargé d'afficher ou de cacher des lignes de tableau en fonction d'un pattern (regexp).

J'essaie de le faire en changeant la l'attribut "class" de la ligne, la feuille de style précisant :
table tbody tr.hidden { display:none}

Le problème est qu'à l'exécution, j'obtiens l'erreur
Erreur : rows[k].setAttribute is not a function

Le code incriminé :

Code : Tout sélectionner

// récupération de la table, du tbody puis des lignes, puis :
...
// pour chaque cellule de la ligne, je regarde si le pattern est trouvé
for (var k=0; k < rows.length; k++)
{
    cells=rows[k].childNodes;
    for (var m=0; m < cells.length; m++)
    {
        if (r.test(cells[m].innerHTML)) foundInLine=true;
    }
    if (foundInLine) 
    {
        rows[k].setAttribute("class","shown");
        foundInLine=false;
    } else {
        rows[k].setAttribute("class","hidden");
    }
}

Le plus curieux est que si je fait ce qui suit (pour le test, car du coup, la fonction ne donne pas le résultat escompté

) :

Code : Tout sélectionner

for (var k=0; k < rows.length; k++)
{
    cells=rows[k].childNodes;
    for (var m=0; m < cells.length; m++)
    {
        if (r.test(cells[m].innerHTML))
        {
            foundInLine=true;
            rows[k].setAttribute("class","hidden");
        }
    }
}

L'erreur n'est pas déclenchée et la ligne est bien cachée.

Cela me semble ressembler au problème rencontré par PerfectSlayer le
26/03/2005 (même erreur avec Focus()) mais il n'a pas eu de réponse

Merci.

Mes tests de mon côté fonctionnent bien. Mais il est difficile d'aller plus en profondeur avec du code incomplet. Aurais-tu une page de test complète s'il te plait ?

Merci d'avoir cherché...

La nuit porte conseil semble-t-il car j'ai trouvé d'où venait le problème :
il ne faut pas initialiser les lignes par

Code : Tout sélectionner

var rows=thead[j].childNodes;

mais par

Code : Tout sélectionner

var rows=thead[j].getElementsByTagName('TR');

ou alors faire un test sur le element.nodeName car dans le premier cas, je me retrouve avec des éléments #text qui n'ont pas de méthode setAttribute.

Pour ceux que cela intéresse, voici donc le code complet (qui fonctionne, celui là

), de ce petit javascript dont l'objet est de filtrer un tableau à partir d'une regexp saisie dans un petit formulaire (les lignes ne correspondant pas à l'expression sont cachées) :

Code : Tout sélectionner

var curFilterStr='.*';

function tabFilter(str)
{
    if (str == '') str= '.*';
    var foundInLine=false;
    var tables=document.getElementsByTagName('table'); 
    var r=new RegExp(str,"gi");
    for (var i=0; i < tables.length; i++) {
        var rows=tables[i].getElementsByTagName('TR');
        for (var k=1; k < rows.length; k++) { // je ne filtre pas la ligne d'entête
            var cells=rows[k].getElementsByTagName('TD');
            for (var m=0; m < cells.length; m++) {
                // test de l'expression régulière
                if (r.test(cells[m].innerHTML)) {
                    foundInLine=true;
                } 
            }
            if (foundInLine) {
                rows[k].className="shown";
                foundInLine=false;
            } else {
                rows[k].className="hidden";
            }
        }
        curFilterStr='.*';
    }
    return false;
}

Le code du formulaire à placer dans la feuille html

Code : Tout sélectionner

                    <form name="search" onSubmit="return findInPage(this.motcle.value);">
                        <font size=3>
                            <input id="searchCell" name="motcle" type="text" size=20/>
                        </font>
                        <input type="submit" value="Go"/>
                    </form>

De plus, il faut ajouter dans la feuille CSS (pour cacher les lignes de class hidden)

Code : Tout sélectionner

table tbody tr.hidden { display:none}

Voila donc.
Merci encore a ceux qui ont essayé... Il est vrais que, comme le dit PsyDk, ce n'était pas facile à trouver avec le code incomplet

A+

Vive la nuit

Sinon, as-tu essayé d'utiliser :

myTable.rows pour les « tr » et myRow.cells pour les « td » ?

Ce sont des attributs valides du DOM html. Je pense que ça devrait être plus efficace que des getElementsByTagName. De plus ça t'évitera de récupérer malencontreusement des lignes d'une table imbriquée.

Non, mais je le ferai certainement car, a défaut d'être plus efficace, c'est plus propre.

Pour l'instant, je débute complètement dans les technos Web (pour javascript, j'ai commencé cela fait à peine une semaine) donc je demande l'indulgence

populaire...

merci encore.

J'ai essayé...
C'est mieux

Geckozone

Erreur : element.setAttribute is not a function

Erreur : element.setAttribute is not a function

Trouvé

Exploration...