最初の要素にのみjavascriptの設定スタイル

私はこの単純なHTMLには、テーブル要素上のいくつかのJavaScriptがあります。私は偶数と奇数の2つのボタンを持っています。ボタンをクリックしても要素がクラスに属したい場合Evenには黄色の背景が必要です。同様に奇数ボタンをクリックすると、クラスOddの行は黄色に変わります。以下は私が書いたコードですが、ボタンをクリックすると1行の色しか変わりません。誰でも助言してください。私は行の数を数えることができますし、forループと行くことができるが、何が間違っているコードですか？ W3Schoolsのから最初の要素にのみ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

：

querySelector（）メソッドは、ドキュメントで指定されたCSSセレクタ（S）に一致する最初の要素を返します。注意：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）であり、配列ではありません。 nodeListのサポートはforEachに制限されています。 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の設定スタイル

答えて

関連する問題