javascript - 使用 Javascript 更改 HTML 中的 colspan 颜色

Question

我有一个问题。我只想为 1 个单词着色，而不是该行的单词。 例如:如果仅通过变为绿色，失败变为红色，不可测试变为橙色而不对最后结果文本进行着色，那就太好了。如何在没有“最后结果”文本的情况下引用单词和颜色？

这是我的 JavaScript 代码:

javascript:
(function() 
{ 
    var all = window.frames['mainframe'].frames['workframe'].document.getElementsByTagName("b");  
    for (var i=0, max=all.length; i < max; i++)  
        { 
            if(all[i].innerHTML == "Failed" )
                { 
                    all[i].parentNode.parentNode.style.textColor = "white"; 
                    all[i].parentNode.parentNode.style.color = "red"; 
                }  

            if(all[i].innerHTML == "Passed")
                { 
                    all[i].parentNode.parentNode.style.backgroundColor = "white"; 
                    all[i].parentNode.parentNode.style.color = "green"; 
                }  

            if(all[i].innerHTML == "Blocked")
                { 
                    all[i].innerHTML = "Not Testable"; 
                    all[i].parentNode.parentNode.style.backgroundColor = "white"; 
                    all[i].parentNode.parentNode.style.color = "orange"; 
                }  
        }  
    }
)();

这是 HTML 代码:

<tr>
  <td width="20%" valign="top">
    <span class="label">Last Result:</span>
  </td>
  <td colspan="2">
    <b>Passed</b>
  </td>
</tr>

Answer 1

您应该使用 if 和 else if 来使您的脚本正常工作

或者采用下面的脚本，它正在工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('b').each(function (index, value) {
            var status = $(this).html();
            if (status === "Passed")
                $(this).css("color", "green");
            else if (status === "Failed")
                $(this).css("color", "red");
            else if (status === "Blocked") {
                $(this).css("color", "orange");
                $(this).html("Not Testable");
            }
        });
    });
</script>

`

这是 html

<table>
    <tr>
       <td width="20%" valign="top">
          <span class="label">Last Result:</span>
       </td>
       <td colspan="2">
           <b>Passed</b>
        </td>
    </tr>
    <tr>
        <td width="20%" valign="top">
            <span class="label">Last Result:</span>
        </td>
        <td colspan="2">
            <b>Failed</b>
        </td>
    </tr>
    <tr>
        <td width="20%" valign="top">
            <span class="label">Last Result:</span>
        </td>
        <td colspan="2">
            <b>Blocked</b>
        </td>
    </tr>
</table>