為什么我的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沒有row屬性。 如果要通過特定索引選擇行元素，請使用HTMLCollection rows ：

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

Answer 2

好吧，我已經糾正了你的問題，把這條建議切成段代碼以減少錯誤，我所做的就是獲取所有tr然后從第二個tr獲取所有td ，然后循環它們

 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>