只有第一個元素的JavaScript設置樣式

我有這個簡單的HTML與表元素上的一些JavaScript。我有兩個按鈕Even和Odd。當甚至按鈕點擊我想要的元素屬於類甚至應該有黃色背景。同樣，當單擊奇數按鈕時，Odd類的行應變爲黃色。下面是我寫的代碼，但點擊一個按鈕只改變一行的顏色。任何人都可以請指教。可能是我可以統計行數，然後使用for循環，但在下面的代碼中出現了什麼問題？只有第一個元素的JavaScript設置樣式

<!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"; 
}

來源

2017-10-14 Sid

你在你的代碼的一些錯誤，從複製到的問題。 – jdv

從

W3Schools的：

的querySelector（）方法返回的文檔中的指定CSS選擇（一個或多個）匹配的第一個元件。注意：querySelector（）方法只返回匹配指定選擇器的第一個元素。要返回所有匹配，請改用querySelectorAll（）方法。

來源

2017-10-14 12:38:41 Billy

要麼你使用像一個選擇，或者你的屬性添加到CSS類：

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

的querySelector返回與查詢匹配的第一個元素。

來源

2017-10-14 12:39:02 fdelia

Document#querySelector返回單個節點。改爲使用Document#querySelectorAll，因爲它返回一組節點。然後使用.forEach()迭代節點來分配背景顏色。

注意：文檔＃querySelectorAll返回elementList（nodeList的子類），而不是數組。 forEach的nodeList支持是有限的。如果forEach不適用於您，請將nodeList轉換爲數組 - 請參閱odd和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>

來源

2017-10-14 12:39:37

只有第一個元素的JavaScript設置樣式

回答

相關問題