爲什麼我的for循環不循環我的表格單元格？ JavaScript

Question

我有一個表格，當單擊包含單元格的按鈕時，要遍歷每個單元格。但是，循環似乎不運行，我無法找到問題。

這裏是代碼片段：

element.onclick = function() { 
 

 
     //Sets color of selected element 
 
     for (var i = 0, cell; cell = document.getElementById('targetLocation').row.cells[i]; i++) { 
 

 
      if (cell.firstChild.style.background == "rgba(223, 22, 22, 0.53)") { 
 
        
 
       cell.firstChild.style.background = 'red'; 
 
      } 
 

 
      else { 
 
       alert('Despite all, I loop') 
 
      }; 
 
     }; 
 
    };

<table id="targetLocation"> 
 
     <tr> 
 
      <th></th> 
 
      <th>A</th> 
 
      <th>B</th> 
 
      <th>C</th> 
 
      <th>D</th> 
 
      <th>E</th> 
 
      <th>F</th> 
 
      <th>G</th> 
 
      <th>H</th> 
 
      <th>I</th> 
 
      <th>J</th> 
 
     </tr> 
 
     <tr> 
 
      <th>1</th> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
     </tr> 
 
    </table>

下面是相應的JavaScript：

對於澄清： 「元素」 是你在上空盤旋的元素。當鼠標懸停在單元格上時，背景顏色將變爲rgba（223,22,22,0.53）。如果您目前在該單元格上方懸停，並且您單擊該按鈕，則應該變成紅色。 onclick函數本身就可以工作，如果我在該函數中設置了一個警報，例如，它可以工作，所以我猜測它是for循環被破壞了。

Answer 1

HTMLTableElement s沒有row屬性。如果你想通過一個特定的索引來選擇行元素，使用rowsHTMLCollection：

document.getElementById('targetLocation').rows[1].cells[...] 

Answer 2

好吧，我已經糾正你了Syntex，藉此忠告片下來，你的代碼部分 識別錯誤，我所做的是讓所有tr然後讓所有td從第二TR然後循環他們

document.getElementById('targetLocation').onclick = function() { 
 
trtable = document.getElementById('targetLocation').getElementsByTagName('tr')[1]; 
 
tcells = trtable.getElementsByTagName("td"); 
 
cellcount = tcells.length; 
 
     //Sets color of selected element 
 
     for (var i = 0;i< cellcount; i++) { 
 
    cell = tcells[i]; 
 
      if (cell.firstChild.style.background == "rgba(223, 22, 22, 0.53)") { 
 
        
 
       cell.firstChild.style.background = 'red'; 
 
       console.log('but this time, I found color on cell :'+i); 
 
      } 
 

 
      else { 
 
       console.log('Despite all, I loop'); 
 
      } 
 
     } 
 
    }; 
 
    
 
function getTarget(elem) 
 
{ 
 

 
}

<table id="targetLocation"> 
 
     <tr> 
 
      <th></th> 
 
      <th>A</th> 
 
      <th>B</th> 
 
      <th>C</th> 
 
      <th>D</th> 
 
      <th>E</th> 
 
      <th>F</th> 
 
      <th>G</th> 
 
      <th>H</th> 
 
      <th>I</th> 
 
      <th>J</th> 
 
     </tr> 
 
     <tr> 
 
      <th>1</th> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)" style="background:rgba(223, 22, 22, 0.53);">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
      <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
     </tr> 
 
    </table>

Answer 3

這是一個不好的做法來硬編碼標籤元素中的樣式屬性。

改爲使用CSS類。

此外，您對屬性（顏色）做出條件，以後可能會對其進行更改。這很容易出錯。永遠不要這樣做。

改爲使用CSS類。

您的代碼將變成：

document.getElementById('targetLocation').onclick = function() { 
 
trtable = document.getElementById('targetLocation').getElementsByTagName('tr')[1]; 
 
tcells = trtable.getElementsByTagName("td"); 
 
cellcount = tcells.length; 
 

 
//Sets color of selected element 
 
for (var i = 0 ; i< cellcount; ++i) { 
 
    cell = tcells[i]; 
 

 
    // Condition is against class only, aspect can change 
 
    // => good practice 
 

 
    if (cell.firstChild.className.indexOf("selected") > -1) { 
 
      
 
    // Here you should use CSS class too 
 
    // What if your designer wants to apply a more beautifull color? 
 
    // cell.firstChild.style.background = 'red'; 
 
    // So: 
 
    cell.firstChild.className = 'someRed'; 
 

 
    console.log('but this time, I found color on cell :'+i); 
 
    } 
 

 
    else { 
 
     console.log('Despite all, I loop'); 
 
    } 
 
} 
 
}; 
 
    
 
function getTarget(elem){}

button.selected { 
 
    background:rgba(223, 22, 22, 0.53); 
 
} 
 

 
.someRed { 
 
    background-color: red ; // or anything else 
 
}

<table id="targetLocation"> 
 
    <tr> 
 
     <th></th> 
 
     <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th><th>I</th><th>J</th> 
 
    </tr> 
 
    <tr> 
 
    <th>1</th> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells selected" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    <td><button class="cells" onmouseover="getTarget(this)">O</button></td> 
 
    </tr> 
 
</table>