1.下载安装jquery
 
可通过下面的方法引入在线版本的js：
 
 
2.准备一个json格式的文件，后缀可以不是.json
例如下面是result.json的格式
{
    "title":"【UI测试结果】-转转2017/1/23 14:47",
    "starttime":"2017/1/23 15:00 45",
    "endtime":"2017/1/23 15:01 42",
    "passcount":10,
    "failurecount":5,
    "resultinfo":[
        {
            "name":"发布",
            "moudle":"Publish",
            "pass":"true",
            "onecepass":"true",
            "log":"true"
        },
        {
            "name":"登录",
            "moudle":"Login",
            "pass":"false",
            "onecepass":"true",
            "log":"asserterrorlog",
            "failurereason":{
                                "errorlog":"asserterror",
                                "errorimg":"./登录.jpg"
                            }
        }
    ]
}
 
3.通过$.getJSON获得Json文件的数据
例如下面的例子：读取result.json文件的内容，存储到result变量中，结果是一个json格式
$.getJSON('./result.json',function(result){}
 
4.通过【$('#元素id').after(html内容);】将html内容添加到定位到的元素后面
元素定位方式
$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到class
 
插入html内容位置：
  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
 
Json数据的操作
JSON对象[key]来读取内容：result['title’]，或者用result.”title"
 
数组的对象值，可以通过$.each来获得数据：
$.each(JSON数组对象,function(遍历索引i，遍历对象){操作遍历的对象})
 
读取result.json，追加html的代码如下
(jquery需要写在<script>标签内）
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
//使用getJSON方法读取json数据,
//注意：info.json可以是不同类型文件，只要其中的数据为json类型即可
   $.getJSON('./result.json',function(result){
      var html_title='';
      var html_resultinfo='';
 
 html_title += '<b>'+result["title"]+'</b>';
 $('#resultitle').after(html_title);
 $.each(result["resultinfo"],function(i,item){
    if(item["pass"]=="true") {
        html_resultinfo += '<tr><td>' + item['name'] + '</td>' +
                '<td>' + item['moudle'] + '</td>' +
                '<td>' + item["pass"] + '</td>' +
                '<td>' + item['onecepass'] + '</td>' +
                '<td id="' + item['moudle'] + '" class="collapsed" onclick="collapsedisplay(' + item['moudle'] + ')"><u style="color: blue;">展开</u></td></tr>';
                html_resultinfo +='<tr id="' + item['moudle'] + 'info" class="collapsedinfo" style="display:none"><td colspan="5">' + item['log'] + '</td></tr>';
    }
$('#infotitle').after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。
    });
});
 
</script>
</HEAD>
<BODY>
<div style="margin-top: 30px">
    <div style="font-size: 30px;text-align: center">
        <p id="resultitle" ></p>
    </div>
    </div>
    <div id="resultinfo" style="clear: both;padding-top: 30px">
        <table style="width: 1080px">
            <tr id="infotitle">
                <th style="width:360px">用例名称</th>
                <th style="width:200px">模块名称</th>
                <th style="width:180px">是否成功</th>
                <th style="width:180px">一次成功</th>
                <th style="width:160px">详情</th></tr>
        </table>
    </div>

</div>
</BODY>
</HTML>

 
 

通过jquery,从json中读取数据追加到html中的更多相关文章

  1. 从JSON中读取数据追加到HTML中

    本文来自https://www.jianshu.com/p/04127d74d88c,并非本人原创,只是作为自己学习使用的资料,如有浏览者请点击地址自行到原作者页面浏览 有时候我们需要将json数据直 ...

  2. Flink 使用（一）——从kafka中读取数据写入到HBASE中

    1.前言 本文是在<如何计算实时热门商品>[1]一文上做的扩展,仅在功能上验证了利用Flink消费Kafka数据,把处理后的数据写入到HBase的流程,其具体性能未做调优.此外,文中并未就 ...

  3. Jmeter从数据库中读取数据

    Jmeter从数据库中读取数据 1.测试计划中添加Mysql Jar包 2.添加线程组 3.添加 jdbc connection configuration 4.添加JDBC Request,从数据库 ...

  4. c和c++中读取数据的方式总结

    目录 c 输出 printf() 输入 scanf getchar(), putchar() gets(), puts() c++ 输入 cin() getline() get() 输出 cout 最 ...

  5. 从多个XML文档中读取数据用于显示webapi帮助文档

    前言: 你先得知道HelpPageConfig文件,不知道说明你现在不需要这个,所以下文就不用看了,等知道了再看也不急.当然如果你很知道这个,下文也不用看了,因为你会了. 方法一: new XmlDo ...

  6. ffmpeg 从内存中读取数据（或将数据输出到内存）

    更新记录(2014.7.24): 1.为了使本文更通俗易懂,更新了部分内容,将例子改为从内存中打开. 2.增加了将数据输出到内存的方法. 从内存中读取数据 ffmpeg一般情况下支持打开一个本地文件, ...

  7. 程序一 用记事本建立文件src.dat，其中存放若干字符。编写程序，从文件src.dat中读取数据，统计其中的大写字母、小写字母、数字、其它字符的个数，并将这些数据写入到文件test.dat中。

    用记事本建立文件src.dat,其中存放若干字符.编写程序,从文件src.dat中读取数据,统计其中的大写字母.小写字母.数字.其它字符的个数,并将这些数据写入到文件test.dat中. #inclu ...

  8. java从文件中读取数据然后插入到数据库表中

    实习工作中,完成了领导交给的任务,将搜集到的数据插入到数据库中,代码片段如下: static Connection getConnection() throws SQLException, IOExc ...

  9. 实验三：将读取数据功能从Repository中分离

    先理解下面这段话之后再开始做实验 经过实验二的改造之后,我们代码有一点结构的概念了: Listing.aspx:向Repository要Products,然后将得到的Products在页面中显示出来. ...

随机推荐

  1. java UTC时间和local时间相互转换

    java UTC时间和local时间相互转换 1.local时间转UTC时间 /** * local时间转换成UTC时间 * @param localTime * @return */ public ...

  2. 第8章 信号（6）_贯穿案例2：mini shell（3）

    4. 贯穿案例2:mini shell(3) (1)之前存在问题 ①刚运行时,mshell作为前台进程.运行的其他命令会被加入新的进程组,并且调用tcsetpgrp将这个进程组设置为前台进程组,因此m ...

  3. OpenGL chapter5 基础纹理

    Chapter5 基础纹理 Contents: ==================================================== | 任务 | 使用的函数 ========== ...

  4. Thread 1 cannot allocate new log的问题分析 (转载)

    Thread 1 cannot allocate new log的问题分析 发生oracle宕机事故,alert文件中报告如下错误: Fri Jan 12 04:07:49 2007Thread 1 ...

  5. Spark分析之BlockManager

    BlockManager中存储block的流程: doPut()方法   入参:blockId, data, level, tellMaster 1)为block创建BlockInfo并加锁使其不能被 ...

  6. IO流程及优化

    http://blog.csdn.net/xypzwl/article/details/51416883 一.存储设备的存储原理 机械硬盘: 机械硬盘使用磁性物质作为存储介质,用N.S极性来代表0或1 ...

  7. SDOI 2017 天才黑客

    /* 根据claris的 博客以及 beginend 的博客来写的 首先考虑如何求出最短路 可以从样例看出 路径是从边走到边的, 所以我们将边看作点 有共同端点的两边之间 互相连边, 边权为lcp. ...

  8. Petapoco 查询 语法

    查询语句 Sql sql = Sql.Builder; sql.Select("spb_MailAddress.*") .From("spb_MailAddress&qu ...

  9. 配置IIS，以在局域网内访问发布的web站点

    在windows 7或win8 中 配置IIS, 以在局域网内访问自己发布的web 网站或应用程序.主要配置步骤如下: 1. 打开 win7 或 win8 控制面板,选择: 打开或关闭windws 功 ...

  10. Configure First SpringMVC project in IntelliJ IDEA(fail)

    Configure First SpringMVC project in IntelliJ IDEA 13 The Mechanism of Spring MVC frameworks by Java ...