html 报告页面 v1.2 批量数据生成表格
html 报告页面 v1.2 批量数据生成表格
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动化测试报告</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<h2 style="font-family: Microsoft YaHei">自动化测试报告</h2> <p class='attribute'><strong>测试结果 : </strong> 共 10，通过 9，失败 1</p>
<style type="text/css" media="screen">
body { font-family: Microsoft YaHei,Tahoma,arial,helvetica,sans-serif;padding: 20px;} </style>
</head>
<body>
<table id='total_table' class="table table-condensed table-bordered table-hover">
<colgroup>
<col align='left' />
<col align='right' />
<col align='right' />
<col align='right' />
</colgroup>
<tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
<th>客户端及版本</th>
<th>通过率</th>
<th>开始时间</th>
<th>结束时间</th>
</tr> <tr class='failClass warning'>
<td>快看小说 3.8.8</td>
<td>99</td>
<td>2019-04-19 13:53:35</td>
<td>2019-04-19 13:53:35</td>
</tr> </table>
<!-- 执行模块 -->
<p class='attribute'><strong>测试报告详情 : </strong> </p>
<table id="result_table" class="table table-condensed table-bordered table-hover">
<colgroup>
<col align='left' />
<col align='right' />
<col align='right' />
<col align='right' />
<col align='right' />
</colgroup>
<tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
<th colspan="2">功能模块</th>
<th>用例总数</th>
<th>通过数</th>
<th>状态</th>
</tr>
<tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
<th colspan="2">业务模块1</th>
<th>30</th>
<th>15</th>
<th class='demo' id="demo">FAIL</th>
</tr> <tr class='failClass warning'>
<th></th>
<th>模块1</th>
<th>10</th>
<th>10</th>
<th class='demo' id="demo1">PASS</th>
</tr> <tr class='failClass warning'>
<td></td>
<td>模块2</td>
<td>20</td>
<td>15</td>
<td class='demo' id="demo2">Fail</td>
</tr> </table>
<!-- 执行模块 -->
<!-- 取组数据 -->
<div id='module'></div>
<div id='case'></div> <script type="text/javascript">
//showdata
//展示数据 var str = "";//定义用于拼接的字符串
//var data=[1,2]
//console.log("data"+data[0].name)
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'}]; console.log(data.length)
console.log(data[0].total)
rows=[] //表头1
var str1='<table id="result_table" class="table table-condensed table-bordered table-hover">'+'<colgroup>'+
'<col align="left" />'+
'<col align="right" />'+
'<col align="right" />'+
'<col align="right" />'+
'<col align="right" />'+
'</colgroup>'
console.log(str1)
//表头2
var str2='<tr id="header_row" class="text-center success" style="font-weight: bold;font-size: 14px;">'+
'<th colspan="2">功能模块</th>'+
'<th>用例总数</th>'+
'<th>通过数</th>'+
'<th>状态</th></tr>'
console.log(str2)
var str=str1+str2 //模块数据显示
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'}]; //var str = "<table class='table table-condensed table-bordered table-hover'>";
//var str ='';
console.log(str)
for (var j= 0; j < modulelist.length; j++) {
console.log(modulelist[j])
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>"; var x=document.getElementById("module")
x.innerHTML = str; //case数据显示
//var str = "<table class='table table-condensed table-bordered table-hover'>";
for (var i = 0; i < data.length; i++) {
console.log(data[i])
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>";
};
//var x=document.getElementById("case")
//x.innerHTML = str; };
//console.log(str)
//var x=document.getElementById("module1")
//x.innerHTML = str; //str +="</table>"; // //模块数据显示
// 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'}]; // //var str = "<table class='table table-condensed table-bordered table-hover'>";
// //var str ='';
// for (var i = 0; i < modulelist.length; i++) {
// console.log(modulelist[i])
// 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>";
// };
// //str +="</table>";
// //console.log(str);
// var x=document.getElementById("module1")
// x.innerHTML = str; // //case数据显示
// //var str = "<table class='table table-condensed table-bordered table-hover'>";
// for (var i = 0; i < data.length; i++) {
// console.log(data[i])
// 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>";
// };
// str +="</table>";
// //console.log(str);
// var x=document.getElementById("module1")
// x.innerHTML = str; //--------------------------------------------------------------------
//change color
//取都用demo的多组
var eles = document.getElementsByClassName('demo');
console.log(eles);
//var x=document.getElementById("demo").innerText;
//console.log("the value is :"+x);
//每组都应用样式
for(var i = 0; i < eles.length; i++){
if(eles[i].innerText == 'PASS'){
eles[i].style.color = 'green';
}else{
eles[i].style.color = 'red';
}
} </script> </body>
</html>
html 报告页面 v1.2 批量数据生成表格的更多相关文章
- python 生成HTmL报告页面 V1.3 修改字体颜色
HTML报告V1.3 根据文字内容显示不同的字体颜色: 代码如下: # -*- coding=utf-8 -*- import time,os """ V1.2 1.生成 ...
- python 生成HTmL报告页面 V1.2
上代码 # -*- coding=utf-8 -*- import time,os #数据部分 func_dict={"funcname":"模块1",} fu ...
- SQL Server 利用批量(batchsize)提交加快数据生成/导入
在最小化日志操作解析,应用的文章中有朋友反映生成测试数据较慢.在此跟大家分享一个简单的应用,在生成数据过程中采用批量提交的方式以加快数据导入. 此应用不光生成测试数据上,在BCP导入数据中,复制初始化 ...
- C#利用SqlDataAdapte对DataTable进行批量数据操作
C#利用SqlDataAdapte对DataTable进行批量数据操作,可以让我们大大简化操作数据的代码量,我们几乎不需要循环和不关心用户到底是新增还是修改,更不用编写新增和修改以及删除的SQL语句, ...
- 从SqlServer现有数据生成Insert脚本
步骤1,打开"Generate and Publish Objects"向导.右键点击要导出数据的数据库,选择Taks->GenerateScript 步骤2,选择要导出数据 ...
- BDC、CATT批量数据维护
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 将表中数据生成SQL语句
在开发过程中,经常需要我们对表中的数据进行转移,如果在同台机器,可以使用SQL自带的导入数据,但是如果想让所有的数据生成可执行的SQL语句,它的移植性最强了.首先要设计一个存储过程.具体如下: CRE ...
- 你好，C++（23） 4.4.2 工资程序成长记：用数组处理批量数据，用循环结构执行重复动作
4.4 从语句到程序 了解了各种表达式和语句之后,就相当于掌握了写作文要用到的词语和句子,但是,仅有词语和句子是无法构成一篇有意义的文章的.要完成一篇文章,先需要确定这篇文章的结构,是先分述再总述, ...
- Python Django CMDB项目实战之-2创建APP、建模（models.py）、数据库同步、高级URL、前端页面展示数据库中数据
基于之前的项目代码来编写 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页index页文章页面 现在我们修改一个文章列表是从数据库中获取数据, 下面我们就需 ...
随机推荐
- Dungeon Game -- latched
The demons had captured the princess (P) and imprisoned her in the bottom-right corner of a dungeon. ...
- Android之Activity之间传递对象
在非常多时候,我们须要在Activity之间传递对象,比方当你点击了某列表的item,须要传递给下一个Activity该对象,那我们须要该怎么做呢? Android支持两种传递对象的方式.一种是bun ...
- js阻碍DOM加载
今天用谷歌做了个小测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 【OpenGL】Shader实例分析（九）- AngryBots中的主角受伤特效
转发请保持地址:http://blog.csdn.net/stalendp/article/details/40859441 AngryBots是Unity官方的一个非常棒的样例.非常有研究价值. 曾 ...
- 微软将支持.net开源并跨平台,新特性会体现于VS2015
http://news.microsoft.com/2014/11/12/microsoft-takes-net-open-source-and-cross-platform-adds-new-dev ...
- 洛谷P2516 [HAOI2010]最长公共子序列
题目描述 字符序列的子序列是指从给定字符序列中随意地(不一定连续)去掉若干个字符(可能一个也不去掉)后所形成的字符序列.令给定的字符序列X="x0,x1,-,xm-1",序列Y=& ...
- bzoj2841
边双联通分量 具体详解蓝书上十分详细,因为必须是奇数个人坐在一起,那么一个人如果能选上,就必须处在一个简单奇圈中.而奇圈也是一个边双联通分量,所以我们先把边双联通分量都挖出来,然后进行二分图染色. 奇 ...
- KVO中你所不知道的"坑"
一.什么是 KVO 首先让我们了解一下什么KVO,全称为Key-Value Observing,是iOS中的一种设计模式,用于检测对象的某些属性的实时变化情况并作出响应.键值观察Key-Value ...
- 元素类型以及overflow，white-space等属性
1:预格式化标签:<pre></pre>2:overflow属性="visible/hidden(隐藏)"/scroll/auto(自动)/inherit; ...
- [Swift通天遁地]三、手势与图表-(4)3DTouch功能在项目中的应用
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...