2 votes

"querySelectorAll" sur une table HTML ne fonctionne pas comme prévu

Je dois utiliser querySelectorAll sur les éléments tr de la table HTML en utilisant nth-child pour imprimer des couleurs différentes pour les nombres pairs et impairs, mais seul le nombre pair fonctionne. Mon code est le suivant

J'obtiens également l'erreur suivante : "Uncaught TypeError : Cannot read property 'style' of undefined",

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
    <thead>
        <tr>
        <th>Numbers</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>1 = odd</td>
        </tr>
        <tr>
        <td>2 = even</td>
        </tr>
        <tr>
        <td>3 = odd</td>
        </tr>
        <tr>
        <td>4 = even</td>
        </tr>
    </tbody>
    </table>
    <button onclick='execute()'>Execute</button>
</body>
<script>
    function execute() {
        // your code goes here
    var odd = document.querySelectorAll("tbody tr:nth-child(odd)")
    var even = document.querySelectorAll("tbody tr:nth-child(even)")
for(i = 0; i<= odd.length; i++){
  odd[i].style.backgroundColor = "red"
}
for(i = 0; i<= even.length; i++){
  even[i].style.backgroundColor = "green"
}
    }

</script>
</html>

0voto

ray hatfield Points 4687

Vous voulez i < odd.length au lieu de i <= odd.length (et le même changement pour les pairs). length sera le dernier indice plus un, car les indices des tableaux sont basés sur zéro.

Le dépassement de la fin du tableau provoque une erreur, qui interrompt l'exécution, de sorte que vous ne voyez aucun des changements qui auraient suivi.

Il ne fonctionne qu'avec ces changements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
    <thead>
        <tr>
        <th>Numbers</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>1 = odd</td>
        </tr>
        <tr>
        <td>2 = even</td>
        </tr>
        <tr>
        <td>3 = odd</td>
        </tr>
        <tr>
        <td>4 = even</td>
        </tr>
    </tbody>
    </table>
    <button onclick='execute()'>Execute</button>
</body>
<script>
    function execute() {
        // your code goes here
    var odd = document.querySelectorAll("tbody tr:nth-child(odd)")
    var even = document.querySelectorAll("tbody tr:nth-child(even)")
for(i = 0; i< odd.length; i++){
  odd[i].style.backgroundColor = "red"
}
for(i = 0; i< even.length; i++){
  even[i].style.backgroundColor = "green"
}
    }

</script>
</html>

0voto

Robert Kawecki Points 1383

Il y a un bug dans la condition de la boucle : en utilisant <= vous dites à JS d'itérer de 0 à la valeur égale à odd.length . Cependant, il n'y a rien à odd[odd.length] car ses indices sont compris entre 0 et odd.length - 1 puisque les tableaux sont indexés à 0. C'est la raison pour laquelle vous obtenez l'erreur que vous voyez - les éléments de tableau inexistants sont toujours évalués à undefined dont les propriétés ne peuvent être mentionnées.

Étant donné que la première boucle génère une erreur, JavaScript met fin à l'exécution et n'arrive jamais à la deuxième boucle. C'est pourquoi les lignes "paires" ne fonctionnent pas.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X