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页文章页面 现在我们修改一个文章列表是从数据库中获取数据, 下面我们就需 ...
随机推荐
- [LeetCode][Java] 4Sum
题目: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...
- swift 2.0 语法 函数
//: Playground - noun: a place where people can play import UIKit /*: 函数 * 格式 func 函数名称(形参名称1: 形参类型, ...
- Magento 模块开发之DispatchEvent
在这一章节中.我们来了解 Magento 中的事件分发机制 Mage::dispatchEvent() 在创建自己的模块时, Event 事件的分发将会变成十分实用且有效 以个人的经验. 事件的分发使 ...
- 关于C语言指针的一些新认识（1）
Technorati 标签: 指针,数组,汇编,C语言 前言 指针是C语言的精华,但我对它一直有种敬而远之的感觉,因为一个不小心就可能让你的程序陷入莫名其妙的麻烦之中.所以,在处理字符串时,我总是能用 ...
- research plan1111
Hello prof.Choi 感谢您的来电,与您的这次通话我已经期盼了很久.我来做个自我介绍,我叫陈飞,今年27岁了,是河北地质大学计算机科学专业的本科毕业生.我非常想提高自己的学历,现在经过刘老师 ...
- ios4--UIView的常见属性(尺寸和位置)
// // ViewController.m // 08-UIView的常见属性(尺寸和位置) // // frame:相对于父控件左上角定位 // bounds:改变长宽,左上角是相对于自己 // ...
- 【POJ 3784】 Running Median
[题目链接] http://poj.org/problem?id=3784 [算法] 对顶堆算法 要求动态维护中位数,我们可以将1-M/2(向下取整)小的数放在大根堆中,M/2+1-M小的数放在小根堆 ...
- [算法基础]斐波那契(recursion+loop)两种方式执行时间对比
一.斐波那契数列求第n项两种方式 1.递归(自上而下)def recur_fibonacci(n): if n <= 0: return 0 if n == 1: return 1 return ...
- setings.py配置文件详解
BASE_DIR指的是项目的根目录.SECRET_KEY是安全码. # SECURITY WARNING: don't run with debug turned on in production! ...
- 软RAID管理
软RAID管理 软RAID 软RAID 提供管理界面:mdadm 软RAID为空余磁盘添加冗余,结合了内核中的md(multi devices). RAID 设备可命名为/dev/md0./dev/m ...