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页文章页面 现在我们修改一个文章列表是从数据库中获取数据, 下面我们就需 ...
随机推荐
- Project Euler：Problem 42 Coded triangle numbers
The nth term of the sequence of triangle numbers is given by, tn = ½n(n+1); so the first ten triangl ...
- Java 实现的断点下载
该断点下载可应用于浏览器或者迅雷等下载工具的下载,实现方式有多种多样的,本文仅仅研究了单线程的下载.迅雷等下载工具会自己主动将下载资源分块并记录每块的起始位置,然后依据系统性能.起多线程下载. 1. ...
- balsamiq mockups 注册
Name: helloWorld Key: eJzzzU/OLi0odswsqslIzcnJD88vykmpsUQCNc41hjV+7q5+AF74Ds8=
- 洛谷P2340 奶牛会展
题目背景 奶牛想证明它们是聪明而风趣的.为此,贝西筹备了一个奶牛博览会,她已经对N 头奶牛进行 了面试,确定了每头奶牛的智商和情商. 题目描述 贝西有权选择让哪些奶牛参加展览.由于负的智商或情商会造成 ...
- linux下.a/.so/.la目标库区别
在linux平台上编译时,常会遇到目标库的疑问,有静态库也有动态库,单个理解都不太难,但是对复杂的工程而言,一旦混合到一起去,对整个工程的理解和调用,将会造成很大困扰,本文就汇总这几种常见编译结果文件 ...
- bzoj1407
扩展欧几里得 我们发现其实就是两个野人在自己的寿命内不会相遇,或者永远不会相遇,那么我们枚举m,然后枚举两个人,看是否符合条件 扩展欧几里得ax+by=c,这里c不能取模,a能取模,具体不想了 #in ...
- WP处理事件
(1).Launching事件 Launching(进入)事件是每一个第三方应用在第一次运行时都必须执行的事件,它主要负责应用程序的初始化.这个事件与Closing事件是对应的,一个运行正常的应用程序 ...
- Rails5 Controller Document
更新: 2017/06/28 大致完成全部 更新: 2017/06/29 补充module文件命名规则 更新: 2017/07/09 补充session的设置 更新: 2018/03/06 修正ren ...
- [Swift通天遁地]四、网络和线程-(8)下载图片并实时显示下载进度
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- ACM_哥德巴赫猜想（素数筛）
哥德巴赫猜想 Time Limit: 2000/1000ms (Java/Others) Problem Description: 哥德巴赫猜想大概是这么一回事:“偶数(>=4) == 两个质数 ...