javascript setting style au premier élément seulement

J'ai ce HTML simple avec du javascript sur l'élément de table. J'ai deux boutons comme pair et impair. Quand même le bouton cliqué je veux l'élément appartient à la classe Même devrait avoir l'arrière-plan jaune. De même, lorsque vous cliquez sur un bouton impaire, les lignes contenant la classe Odd doivent devenir jaunes. Ci-dessous le code que j'ai écrit mais en cliquant sur un bouton, il change de couleur d'une seule ligne. Quelqu'un pourrait-il conseiller? Peut-être que je peux compter le nombre de lignes, puis aller avec une boucle for, mais quel est le problème dans le code ci-dessous?javascript setting style au premier élément seulement

<!DOCTYPE html> 
<html> 
<head> 
    <title>Even & Odd row event</title> 
</head> 
<body> 
<table id="tab"> 
    <thead> 
     <tr class="hdr"> 
      <th>Name</th> 
      <th>Age</th> 
      <th>Module</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="odd"> 
      <td>AAA</td> 
      <td>32</td> 
      <td>HANA UI5</td> 
     </tr> 
     <tr class="even"> 
      <td>BBB</td> 
      <td>33</td> 
      <td>PI</td> 
     </tr> 
     <tr class="odd"> 
      <td>CCC</td> 
      <td>37</td> 
      <td>CDS</td> 
     </tr> 
     <tr class="even"> 
      <td>DDD</td> 
      <td>32</td> 
      <td>FIORI UI5</td> 
     </tr> 
    </tbody> 

</table> 
<button id="btn1">Even</button> 
<button id="btn2">Odd</button> 

<script type="text/javascript" src="dom7.js"></script> 
</body> 
</html> 

var btn1 = document.querySelector("#btn1"); 
var btn2 = document.querySelector("#btn2"); 


btn1.onclick = function(){ 
    var c1 = document.querySelector(".odd"); 
    c1.style.backgroundColor = "whit`enter code here`e"; 
    var c2 = document.querySelector(".even"); 
    //debugger; 
    c2.style.backgroundColor = "yellow"; 
} 

btn2.onclick = function(){ 
    var c3 = document.querySelector(".odd"); 
    c3.style.backgroundColor = "yellow"; 
    var c4 = document.querySelector(".even"); 
    c4.style.backgroundColor = "white"; 
}

Source

2017-10-14 Sid

Vous avez des erreurs dans votre code de copier sur la question. – jdv

de w3schools:

Procédé querySelector() renvoie le premier élément qui correspond à un sélecteur CSS spécifié (s) dans le document. Remarque: La méthode querySelector() renvoie uniquement le premier élément qui correspond aux sélecteurs spécifiés. Pour retourner toutes les correspondances, utilisez plutôt la méthode querySelectorAll().

Source

2017-10-14 12:38:41 Billy

Soit vous utilisez un sélecteur similaire ou vous ajoutez la propriété à la classe css:

document.querySelector('.even').style.backgroundColor = 'yellow';

Le querySelector renvoie le premier élément correspondant à la requête.

Source

2017-10-14 12:39:02 fdelia

Document#querySelector renvoie un seul noeud. Utilisez Document#querySelectorAll à la place, car il renvoie une collection de noeuds. Ensuite, itérez les noeuds en utilisant .forEach() pour affecter la couleur d'arrière-plan.

Remarque: Le document # querySelectorAll renvoie un elementList (une sous-classe de nodeList) et non un tableau. Le support nodeList de forEach est limité. Si le forEach ne fonctionne pas pour vous, convertissez le nodeList en tableau - voir les commentaires pour les variables odd et even.

var btn1 = document.querySelector("#btn1"); 
 
var btn2 = document.querySelector("#btn2"); 
 
var odd = document.querySelectorAll(".odd"); // [].slice.call(document.querySelectorAll(".odd"), 0); 
 
var even = document.querySelectorAll(".even"); // [].slice.call(document.querySelectorAll(".even"), 0) 
 

 
function updateRowColors(color_odd, color_even) { 
 
    odd.forEach(function updateColor(el) { 
 
    el.style.backgroundColor = color_odd; 
 
    }); 
 
    
 
    even.forEach(function updateColor(el) { 
 
    el.style.backgroundColor = color_even; 
 
    }); 
 
} 
 

 
btn1.onclick = function(){ 
 
    updateRowColors('white', 'yellow'); 
 
} 
 

 
btn2.onclick = function(){ 
 
    updateRowColors('yellow', 'white'); 
 
}

<table id="tab"> 
 
    <thead> 
 
     <tr class="hdr"> 
 
      <th>Name</th> 
 
      <th>Age</th> 
 
      <th>Module</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="odd"> 
 
      <td>AAA</td> 
 
      <td>32</td> 
 
      <td>HANA UI5</td> 
 
     </tr> 
 
     <tr class="even"> 
 
      <td>BBB</td> 
 
      <td>33</td> 
 
      <td>PI</td> 
 
     </tr> 
 
     <tr class="odd"> 
 
      <td>CCC</td> 
 
      <td>37</td> 
 
      <td>CDS</td> 
 
     </tr> 
 
     <tr class="even"> 
 
      <td>DDD</td> 
 
      <td>32</td> 
 
      <td>FIORI UI5</td> 
 
     </tr> 
 
    </tbody> 
 

 
</table> 
 
<button id="btn1">Even</button> 
 
<button id="btn2">Odd</button>

Source

2017-10-14 12:39:37

javascript setting style au premier élément seulement

Répondre

Questions connexes