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>

Answer 2

试试这个

  document.getElementsByTagName("b").innerHTML == "<span class='Failed'>Failed</span>"
  document.getElementsByTagName("b").innerHTML == "<span class='Passed'>Passed</span>"

在css中，将css应用于Passed和Failed类

.Passed {
  // Your css
} 
.Failed {
  // Your css
}

Answer 3

您可以尝试这样的事情：

(function() 
{ 
    var all1 = document.getElementsByTagName("b");  
    alert(all1[0].innerHTML);
    var max1 = all1.length;
    for (var i=0; i < max1; i++)  
        { 
            if(all1[i].innerHTML == "Failed" )
                { 
                    alert("failed");
                    all1[i].className = "failed"; 
                }  

            if(all1[i].innerHTML == "Passed")
                { 
                    alert("passed");
                    //all1[i].addClass("passed"); 
                    all1[i].className = "passed";
                }  

            if(all1[i].innerHTML == "Blocked")
                { 
                    alert("blocked");
                    //all1[i].innerHTML = "Not Testable"; 
                    all1[i].className = "blocked";
                }  
        }  
    }
)();

小提琴：http://jsfiddle.net/4xrkyqfq/1/

更改了代码以满足您的需求。希望它有所帮助。

使用Javascript更改HTML中的colspan颜色

3 个答案: