为什么我的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>