Javascript 条件格式在第一次迭代后停止

Question

我正在使用一些代码来创建功能格式。说到代码，我是个大菜鸟，但我试着保持逻辑，向他人学习以及通过在线教程学习。

我一直在研究下面的代码，它读取 table 中的 RISK 列并且应该循环遍历 IF 语句。

<div id="[@field:Risk]"></div>

<script>
    var line_id = '[@field:Risk]';
    var line=document.getElementById(line_id).parentNode.parentNode;
    var elems = line.getElementsByTagName("td"); 

    for (var i = 0, m = elems.length; i < m; i++) {
        if (elems[i].innerHTML == "Low") { elems[i].style.color="ForestGreen";} 
        if (elems[i].innerHTML == "Low") { elems[i].style.fontWeight = "600";}
        if (elems[i].innerHTML == "Mid") { elems[i].style.color="DarkOrange";}
        if (elems[i].innerHTML == "Mid") { elems[i].style.fontWeight = "600";}
        if (elems[i].innerHTML == "High") { elems[i].style.color = "Red";}
        if (elems[i].innerHTML == "High") { elems[i].style.fontWeight = "600";} 
    }
</script>

然而，在它找到 Low、Mid 和 High 的第一个实例后，这些术语的其他出现的 none 会按照上面的格式突出显示。在找到三个定义的术语后，循环实际上停止了。我对为什么会这样感到困惑。谁能help/explain我做错了什么？

Answer 1

你能试试吗？

<div id="[@field:Risk]"></div>
<SCRIPT LANGUAGE="JavaScript">
var line_id='[@field:Risk]';
var line=document.getElementById(line_id).parentNode.parentNode;
var elems = line.getElementsByTagName("td");
var colors = {
  Low: "ForestGreen",
  Mid: "DarkOrange",
  High: "Red",
}

for (var i=0, m=elems.length; i<m; i++) {
  if (colors[elems[i].innerHTML]) {
    elems[i].style.fontWeight = 600;
    elems[i].style.color = colors[elems[i].innerHTML]
  } else {
    console.warn("Unknow value of " + elems[i].innerHTML + " for index " + i)
  }
}</SCRIPT>

Answer 2

<div id="[@field:Risk]"></div>
<script type="text/javascript">//use lowercase; LANGUAGE="JavaScript" is deprecated
var line_id='[@field:Risk]';
var line=document.getElementById(line_id).parentNode.parentNode;
var elems = line.getElementsByTagName("td"); 
for (var i=0, m=elems.length; i<m; i++) {
if (elems[i].innerHTML=="Low")  { 
    elems[i].style.color="ForestGreen";
    elems[i].style.fontWeight = "600";} 
//if (elems[i].innerHTML=="Low") { elems[i].style.fontWeight = "600";}
if (elems[i].innerHTML=="Mid")  { 
    elems[i].style.color="DarkOrange";
    elems[i].style.fontWeight = "600";}
//if (elems[i].innerHTML=="Mid")  { elems[i].style.fontWeight = "600";}
if (elems[i].innerHTML=="High")  { 
    elems[i].style.color="Red";
    elems[i].style.fontWeight = "600";}
//if (elems[i].innerHTML=="High")  { elems[i].style.fontWeight = "600";} 
}
</script>

Answer 3

你的代码对我来说工作正常，看演示： http://jsbin.com/capatoyidu/edit?html,console,output

但是，您的代码可以简化为以下内容：

<div id="[@field:Risk]"></div>
<SCRIPT LANGUAGE="JavaScript">
var line_id='[@field:Risk]';
var line=document.getElementById(line_id).parentNode.parentNode;
var elems = line.getElementsByTagName("td"); 
for (var i=0, m=elems.length; i<m; i++) 
{
if (elems[i].innerHTML=="Low")  { 
  elems[i].style.color="ForestGreen";
  elems[i].style.fontWeight = "600";
} else if (elems[i].innerHTML=="Mid") { 
  elems[i].style.color="DarkOrange";            
  elems[i].style.fontWeight = "600";
} else if (elems[i].innerHTML=="High")  { 
  elems[i].style.color="Red";
  elems[i].style.fontWeight = "600";
} 
}
</SCRIPT>

Javascript 条件格式在第一次迭代后停止

Javascript for conditional formatting stops after first iteration

javascript

var

conditional-formatting