HTML 1.1页面js修改文字颜色

昨天的报告页面，想要实现根据不同文字内容改变字体颜色，效果图：
HTML 1.1页面js修改文字颜色
调试了半天出不来效果，最后请教了前端，上代码：
 1         <!DOCTYPE html>
 2         <html lang="en">
 3         <head>
 4             <meta charset="UTF-8">
 5             <title>自动化测试报告</title>
 6             <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 7             <h2 style="font-family: Microsoft YaHei">自动化测试报告</h2>
 8             <p class='attribute'><strong>测试结果 : </strong> 共 10，通过 9，失败 1</p>
 9             <style type="text/css" media="screen">
10             body  { font-family: Microsoft YaHei,Tahoma,arial,helvetica,sans-serif;padding: 20px;}
11                         
12         </style>                            
13         </head>
14         <body>
15             <table id='result_table' class="table table-condensed table-bordered table-hover">
16                 <colgroup>
17                     <col align='left' />
18                     <col align='right' />
19                     <col align='right' />
20                     <col align='right' />
21                 </colgroup>
22                 <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
23                     <th>客户端及版本</th>
24                     <th>通过率</th>
25                     <th>开始时间</th>
26                     <th>结束时间</th>
27                 </tr>
28                 
29         <tr class='failClass warning'>
30             <td>快看小说 3.8.8</td>
31             <td>99</td>
32             <td>2019-04-19 10:33:47</td>
33             <td>2019-04-19 10:33:47</td>
34         </tr>
35             <!-- 执行模块 -->
36             <p class='attribute'><strong>测试详情 : </strong> 执行结果</p>
37             <table id='result_table' class="table table-condensed table-bordered table-hover">
38                 <colgroup>
39                    <col align='left' />
40                    <col align='right' />
41                    <col align='right' />
42                    <col align='right' />
43                    <col align='right' />
44                 </colgroup>
45                 <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
46                     <th colspan="2">业务模块</th>
47                     <th>用例总数</th>
48                     <th>通过数</th>
49                     <th>状态</th>
50                 </tr>
51                 
52         <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
53             <th></th>
54             <th>模块1</th>
55             <th>10</th>
56             <th>10</th>
57             <th class='demo' id="demo" >PASS</th>
58         </tr>
59                 
60         <tr class='failClass warning'>
61             <td></td>
62             <td>模块2</td>
63             <td>20</td>
64             <td>15</td>
65             <td class='demo'  id="demo2">FAIL</td>
66            
67         </tr>
68                            
69             </table>
70             <script type="text/javascript">
71                 //change color
72                 //取都用demo的多组
73                 var eles = document.getElementsByClassName('demo');
74                 console.log(eles);
75                 var x=document.getElementById("demo").innerText;
76                 console.log("the value is :"+x);
77                 //每组都应用样式
78                 for(var i = 0; i < eles.length; i++){
79                     if(eles[i].innerText == 'PASS'){
80                         eles[i].style.color = 'green';
81                     }else{
82                         eles[i].style.color = 'red';
83                     }
84                 }
85 
86             </script>    
87         </body>
88         </html>
View Code