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

我正在学习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>

1EXMPK50012510500510
2EXMPK10002410402002080
3EXMPK150038162045004860
4EXMPK2000416232080009280
5EXMPK250053233001250016500
6EXMPK800518944
4000
4720

按钮，然后激活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";
    }
}

函数find（）{
var td=document.getElementsByClassName（'netto'）；
var-val=td.value；
对于（变量i=0；i=1000）
td[i].style.backgroundColor=“红色”；
其他的
td[i].style.backgroundColor=“蓝色”；
}
}

您可以在td阵列上使用函数

此外，您还应该在每次迭代期间检查td innerHTML（而不是value）

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

您可以在td阵列上使用函数

此外，您还应该在每次迭代期间检查td innerHTML（而不是value）

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

---

您需要检查

textContent

not value，并考虑到

textContent

是一个字符串，因此需要将其转换为数值，以便使用

number

方法进行正确比较

// 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"
  }

}

//GetElementsByCassName返回一个HTML集合而不是数组，因此我们需要
//首先将其转换为数组，以便循环
const td=[…document.getElementsByClassName（'netto'）]
for（设i=0；i1000）{
元素[i].style.backgroundColor=“绿色”
}
}

---

下面是一个示例

您需要检查

textContent

not value，并考虑到

textContent

是一个字符串，因此您需要将其转换为数值，以便使用

number

方法进行正确比较

// 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"
  }

}

//GetElementsByCassName返回一个HTML集合而不是数组，因此我们需要
//首先将其转换为数组，以便循环
const td=[…document.getElementsByClassName（'netto'）]
for（设i=0；i1000）{
元素[i].style.backgroundColor=“绿色”
}
}

---

以下是示例

您的代码中有两个主要错误：

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

其次，值参考元素字段“值”

如果您有您可以使用它

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

最后，value、innerHTML或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";
  }
}

在JS中哪个更有效

---

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

您的代码中有两个主要错误：

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

其次，值参考元素字段“值”

如果您有您可以使用它

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

最后，value、innerHTML或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";
  }
}

在JS中哪个更有效

---

考虑使用关键字let和const来声明作用域变量，而不是var

，而且innerHTML类型是string。在这种情况下，cast将按预期进行，但如果您尝试添加值，例如，您可能会遇到一些问题。使用parseInt隐式转换值并避免问题。如果要使用三元，最好使用正确的方法，而不是If

element.style.backgroundColor=+element.textContent.trim（）>=1000？“红色”：“蓝色”同样innerHTML类型是字符串。在这种情况下，cast将按预期进行，但如果您尝试添加值，例如，您可能会遇到一些问题。使用parseInt隐式转换值并避免问题。如果要使用三元，最好使用正确的方法，而不是If
element.style.backgroundColor=+element.textContent.trim（）>=1000？“红色”：“蓝色”
Here you go Here you go
innerHTML
将提供html元素，因此在本例中，使用
textContent
将是更好的方法..是的，假设内部HTML不总是返回文本节点，那么HTML集合是可写的，因此可以用于循环。
innerHTML
将提供HTML元素，因此在这种情况下，使用
textContent
将是更好的方法。.是的，假设内部HTML不总是返回一个文本节点，那么EAN HTML集合是可写的，所以您可以在其上使用for循环。