html 报告页面 v1.2 批量数据生成表格

上代码：
  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 
  9     <p class='attribute'><strong>测试结果 : </strong> 共 10，通过 9，失败 1</p>
 10     <style type="text/css" media="screen">
 11     body  { font-family: Microsoft YaHei,Tahoma,arial,helvetica,sans-serif;padding: 20px;}
 12 
 13     </style>
 14 </head>
 15 <body>
 16     <table id='total_table' class="table table-condensed table-bordered table-hover">
 17         <colgroup>
 18             <col align='left' />
 19             <col align='right' />
 20             <col align='right' />
 21             <col align='right' />
 22         </colgroup>
 23         <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
 24             <th>客户端及版本</th>
 25             <th>通过率</th>
 26             <th>开始时间</th>
 27             <th>结束时间</th>
 28         </tr>
 29         
 30 <tr class='failClass warning'>
 31     <td>快看小说 3.8.8</td>
 32     <td>99</td>
 33     <td>2019-04-19 13:53:35</td>
 34     <td>2019-04-19 13:53:35</td>
 35 </tr>
 36 
 37     </table>
 38     <!-- 执行模块 -->
 39     <p class='attribute'><strong>测试报告详情 : </strong> </p>
 40     <table id="result_table" class="table table-condensed table-bordered table-hover">
 41         <colgroup>
 42            <col align='left' />
 43            <col align='right' />
 44            <col align='right' />
 45            <col align='right' />
 46            <col align='right' />
 47         </colgroup>
 48         <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
 49             <th colspan="2">功能模块</th>
 50             <th>用例总数</th>
 51             <th>通过数</th>
 52             <th>状态</th>
 53         </tr>
 54         <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
 55             <th colspan="2">业务模块1</th>
 56             <th>30</th>
 57             <th>15</th>
 58             <th class='demo' id="demo">FAIL</th>
 59         </tr>
 60 
 61         <tr class='failClass warning'>
 62             <th></th>
 63             <th>模块1</th>
 64             <th>10</th>
 65             <th>10</th>
 66             <th class='demo' id="demo1">PASS</th>
 67         </tr>
 68                 
 69         <tr class='failClass warning'>
 70             <td></td>
 71             <td>模块2</td>
 72             <td>20</td>
 73             <td>15</td>
 74             <td class='demo' id="demo2">Fail</td>
 75         </tr>
 76        
 77 
 78     </table>
 79     <!-- 执行模块 -->
 80     <!-- 取组数据 -->
 81     <div id='module'></div>
 82     <div id='case'></div>
 83 
 84   
 85     <script type="text/javascript">
 86     //showdata
 87     //展示数据
 88    
 89         var str = "";//定义用于拼接的字符串
 90         //var data=[1,2]
 91         //console.log("data"+data[0].name)        
 92         var data=[{'passnum': '10', 'total': '10', 'name': '模块1', 'radio': '80', 'failnum': '0','status': 'PASS'}, {'passnum': '15', 'total': '20', 'name': '模块2', 'radio': '75', 'failnum': '5', 'status': 'Fail'}];
 93         
 94         console.log(data.length)
 95         console.log(data[0].total)
 96         rows=[]
 97 
 98         //表头1
 99         var str1='<table id="result_table" class="table table-condensed table-bordered table-hover">'+'<colgroup>'+
100             '<col align="left" />'+
101             '<col align="right" />'+
102             '<col align="right" />'+
103             '<col align="right" />'+
104             '<col align="right" />'+
105             '</colgroup>'
106         console.log(str1)  
107         //表头2
108         var str2='<tr id="header_row" class="text-center success" style="font-weight: bold;font-size: 14px;">'+
109         '<th colspan="2">功能模块</th>'+
110         '<th>用例总数</th>'+
111         '<th>通过数</th>'+
112         '<th>状态</th></tr>'
113         console.log(str2)
114         var str=str1+str2
115 
116 
117         //模块数据显示
118         var modulelist=[{'failnum': '0', 'status': 'PASS', 'total': '30', 'passnum': '25', 'radio': '80', 'name': '业务模块1'}, {'failnum': '0', 'status': 'PASS', 'total': '10', 'passnum': '10', 'radio': '80', 'name': '业务模块2'}];
119 
120         //var str = "<table  class='table table-condensed table-bordered table-hover'>";
121         //var str ='';
122         console.log(str)
123         for (var j= 0; j < modulelist.length; j++) {
124             console.log(modulelist[j])
125             str+='<tr  class="text-center success" style="font-weight: bold;font-size: 14px;"><th colspan="2">'+modulelist[j].name+"</th><th>"+modulelist[j].total+"</th><th>"+modulelist[j].passnum+"</th><th class='demo'>"+modulelist[j].status+"</th></tr>";
126       
127             var x=document.getElementById("module")
128             x.innerHTML = str;
129            
130             //case数据显示
131             //var str = "<table  class='table table-condensed table-bordered table-hover'>";
132             for (var i = 0; i < data.length; i++) {
133                 console.log(data[i])
134                 str+="<tr class='failClass warning'><td></td><td>"+data[i].name+"</td><td>"+data[i].total+"</td><td>"+data[i].passnum+"</td><td class='demo'>"+data[i].status+"</td></tr>";
135             };
136                //var x=document.getElementById("case")
137               //x.innerHTML = str;
138               
139         };  
140         //console.log(str)
141         //var x=document.getElementById("module1")
142         //x.innerHTML = str;
143 
144         //str +="</table>";
145      
146         // //模块数据显示
147         // var modulelist=[{'failnum': '0', 'status': 'PASS', 'total': '30', 'passnum': '25', 'radio': '80', 'name': '业务模块1'}, {'failnum': '0', 'status': 'PASS', 'total': '10', 'passnum': '10', 'radio': '80', 'name': '业务模块2'}];
148 
149         // //var str = "<table  class='table table-condensed table-bordered table-hover'>";
150         // //var str ='';
151         // for (var i = 0; i < modulelist.length; i++) {
152         //     console.log(modulelist[i])
153         //     str+='<tr  class="text-center success" style="font-weight: bold;font-size: 14px;"><th colspan="2">'+modulelist[i].name+"</th><th>"+modulelist[i].total+"</th><th>"+modulelist[i].passnum+"</th><th class='demo'>"+modulelist[i].status+"</th></tr>";
154         // };
155         // //str +="</table>";
156         // //console.log(str);
157         // var x=document.getElementById("module1")
158         // x.innerHTML = str;
159 
160         // //case数据显示
161         // //var str = "<table  class='table table-condensed table-bordered table-hover'>";
162         // for (var i = 0; i < data.length; i++) {
163         //     console.log(data[i])
164         //     str+="<tr class='failClass warning'><td></td><td>"+data[i].name+"</td><td>"+data[i].total+"</td><td>"+data[i].passnum+"</td><td class='demo'>"+data[i].status+"</td></tr>";
165         // };
166         // str +="</table>";
167         // //console.log(str);
168         // var x=document.getElementById("module1")
169         // x.innerHTML = str;
170 
171         //--------------------------------------------------------------------
172         //change color
173         //取都用demo的多组
174         var eles = document.getElementsByClassName('demo');
175         console.log(eles);
176         //var x=document.getElementById("demo").innerText;
177         //console.log("the value is :"+x);
178         //每组都应用样式
179         for(var i