为什么我的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-function本身是有效的，如果我在该函数中设置一个警报，例如，它可以工作，所以我猜它是for-loop已经坏了。

Answer 1

HTMLTableElement没有row属性。如果要按特定索引选择行元素，请使用rows HTMLCollection：

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

Answer 2

我已经纠正了你的syntex，接受这个建议，将你的代码分成几部分 识别错误，我所做的是获取所有tr然后从第二个tr获取所有td然后循环它们

＆＃13;

＆＃13;

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)
{

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在标记元素中对style属性进行硬编码是一种不好的做法。

改用CSS类。

此外，您对将来可能更改的属性（颜色）创建条件。它容易出错。不要那样做。

改用CSS类。

您的代码可能会变成：

＆＃13;

＆＃13;

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){}

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;