Question

我正在学习js atm并偶然发现，我想用红色突出显示大于1000的值，而用蓝色突出显示其他值

此代码显示此表，并且工作正常。

<tr> 
<td>1</td><td>EX</td><td>MPK</td><td class='netto'>500</td><td>1</td><td>2</td><td>510</td><td>500</td><td>510</td>
</tr><tr>
 <td>2</td><td>EX</td><td>MPK</td><td class='netto'>1000</td><td>2</td><td>4</td><td>1040</td><td>2000</td><td>2080</td>
</tr><tr> 
<td>3</td><td>EX</td><td>MPK</td><td class='netto'>1500</td><td>3</td><td>8</td><td>1620</td><td>4500</td><td>4860</td>
</tr><tr>
<td>4</td><td>EX</td><td>MPK</td><td class='netto'>2000</td><td>4</td><td>16</td><td>2320</td><td>8000</td><td>9280</td>
</tr><tr>
<td>5</td><td>EX</td><td>MPK</td><td class='netto'>2500</td><td>5</td><td>32</td><td>3300</td><td>12500</td><td>16500</td>
</tr><tr>
<td>6</td><td>EX</td><td>MPK</td><td class='netto'>800</td><td>5</td><td>18</td><td>944</td><td><p class='demo'>4000</p></td><td>4720</td>
</tr>

按钮会激活js

<input type="button" value="Find greater than 1000" onclick = "find()">

和js代码有点奏效，但我仍然不知道该使用什么循环来突出显示正确的值

function find() {
    var td = document.getElementsByClassName('netto');
    var val = td.value;
    for (var i = 0; i < td.length; i++) {
      if (val >= 1000)
        td[i].style.backgroundColor ="red";
      else
       td[i].style.backgroundColor ="blue";
    }
}

Answer 1

您可以在td数组上使用for each函数。

还应该在每次迭代中检查td innerHTML（而不是值）。

document.getElementsByClassName('netto').forEach(element => {
 
   element.innerHTML >= 1000 ? element.style.backgroundColor = 'red' : element.style.backgroundColor = 'blue;
})

Answer 2

您需要检查textContent不是值，并考虑到textContent是字符串，因此需要将其转换为数字值，以便可以使用Number方法正确比较< / p>

// getElementsByClassName returns an HTML collection not array so we need 
// to convert it to array first so we can loop through
const td= [...document.getElementsByClassName('netto')]

for (let i = 0; i < elements.length; i++) {
  if(Number(elements[i].textContent) > 1000) {
    elements[i].style.backgroundColor= "green"
  }

}

这里是js fiddle的示例

Answer 3

您的代码有2个主要错误：

第一个td是一个数组，因此 td.value 是未定义的。

第二个值是指元素字段“值”。

如果您具有，则可以使用它。

在这里需要元素的内容。您必须使用 td.innerHTML 或 td.textContent

最后，值，内部HTML 或 textContent 是字符串。在对数学进行运算之前，应将其转换为数字。

所以使用代码的正确方法是

function find() {
  var td = document.getElementsByClassName('netto');
  for (var i = 0; i < td.length; i++) {
    var val = parseInt(td[i].textContent);
    if (val >= 1000)
      td[i].style.backgroundColor ="red";
    else
      td[i].style.backgroundColor ="blue";
  }
}

您可以使用结构

const array = document.getElementsByClassName('netto');
for (let td of array )
{
    const val = td.textContent;
    /* ... */
}

在JS中效率更高。

并考虑使用关键字 let 和 const 来声明范围变量，而不是 var 。

JS突出显示红色的1值和蓝色的第二个值

3 个答案: