1. Download and install jquery The following method can be used to introduce the online version of JS:<script src= "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script> Reference Installation Documentation:http://www.runoob.com/jquery/jquery-install.html 2. Prepare a JSON-formatted file, and the suffix may not be. JSONFor example, the following is the format of Result.json{
"title": "UI Test Results"-turn 2017/1/23 14:47 ",
" starttime": "2017/1/23 15:00",
" endtime": "2017/1/23 15:01",
"Passcount": Ten,
"Failurecount": 5,
"Resultinfo": [
{
"name": "Publish",
" moudle": "Publish",
"Pass": "true",
"Onecepass": "True",
"Log": "True"
},
{
"name": "Login",
" moudle": "Login",
"Pass": "false",
"Onecepass": "True",
" Log": "Asserterrorlog",
"Failurereason": {
" errorlog": "Asserterror",
" errorimg": "./login. jpg"
}
}
]
} 3. Obtaining data for JSON files via $.getjsonFor example, the following example reads the contents of a Result.json file, stores it in a result variable, and the result is a JSON format$.getjson ('./result.json ', function (result) {} 4. Through "$ (' #元素id '). After (HTML content);" Add HTML content to the element that is anchored to
element Positioning method$ ("#id"): Navigate to ID,$ ("P"): Navigate to label p, other labels similarly$ (". Class"): Navigate to Class
Insert HTML content location:
- Append ()-inserts content at the end of the selected element
- Prepend ()-Inserts content at the beginning of the selected element
- After ()-Inserts the content after the selected element
- Before ()-insert content before selected element
operation of JSON data JSON object [key] to read the content: result[' title
'], or use result. " Title " an array of object values that can be $.each to obtain data:$.each (JSON array object, function (traverse index I, traverse object) {operation traversed object}) to read the Result.json, append the HTML code as follows(jquery needs to be written in the <script> tag) <! 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 () {
//Using the Getjson method to read JSON data,//Note: Info.json can be a different type of file, as long as the data in it is JSON type$.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; > Expand </u></td></tr> ';Html_resultinfo + = ' <tr id= "' + item[' moudle '] + ' info ' class= ' collapsedinfo ' style= ' Display:none ' &G T;<TD colspan= "5" > ' + item[' log ' + ' </td></tr> '; }$ (' #infotitle '). After (html_resultinfo);//after method: Inserts the content after each matched element. });}); </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" > Use case name </th>
<th style= "width:200px" > Module name </th>
<th style= "width:180px" > Success </th>
<th style= "width:180px" > One success </th>
<th style= "width:160px" > Details </th></tr>
</table>
</div>
</div>
</BODY>
</HTML>
Append data from JSON to HTML via jquery
