单击更改表格单元格的样式

Question

我想在单击按钮时更改特定表格单元格的颜色。

<button onclick="highlight()">Toggle highlighting</button>

和JS：

function highlight() {
    var x = document.getElementsByClassName('best');
    for (var i = 0; i < x.length; i++) {
        x.get(i).style.color = "green";
    }
}

我将要更改的表单元格添加到“最佳”类中，但是单击按钮时，没有任何变化。 我首先尝试将它们全部分配给一个ID，然后使用document.getElementById('best').style.color = "green"; ，但这只会更改ID为“ best”的第一个元素，而不是全部。 highlight()应该是什么样子？

Answer 1

您不需要在那里使用x.get(i) 。 只需使用x[i]访问元素

请参见以下代码：

function highlight() {
   var x = document.getElementsByClassName('best');
   for (var i = 0; i < x.length; i++) {
     x[i].style.color = "green";
   }
}

Answer 2

首先，我建议在使用像这样的nodeList时使用Java脚本内置的forEach（）函数，因为发生错误的可能性较小：

bestElements.forEach(best => {
  best.style.color = "green";
});

其次，我相信您可能正在寻找background-color属性，而不是color属性，如果您要更改整个单元格的颜色。

bestElements.forEach(best => {
  best.style.backgroundColor = "green";
});