條件格式化的Javascript在第一次迭代后停止

Question

我在創建功能格式時使用了一些代碼。 關於代碼，我是一個非常菜鳥，但我嘗試對此保持邏輯，並向他人學習以及通過在線教程學習。

我一直在研究下面的代碼，該代碼讀取表中的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>   

但是，在找到“低”，“中”和“高”的第一個實例之后，這些術語的其他外觀均未按上述格式突出顯示。 找到三個定義的術語后，循環實際上停止了。 我對為什么會這樣感到困惑。 誰能幫助/解釋我做錯了什么？

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，控制台，輸出

但是，您的代碼可以簡化為以下內容：

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