Home > Article > Web Front-end > js implements content display and uses json to transmit data_javascript skills

js implements content display and uses json to transmit data_javascript skills

WBOYOriginal: 2016-05-16 15:10:381303browse

I recently worked on a project, and the requirement was that the div should be empty. All codes should be written in 3f1c4e4b6b16bbbd69b2ee476dc4f83a, and the text in 3f1c4e4b6b16bbbd69b2ee476dc4f83a should be transmitted using json. This problem is a bit difficult for me.
Fortunately, I finally wrote it with the help of tutorials and colleagues. The source code is posted below.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>测试项目</title>

<script src="js\newdoT.js"></script>

//关键点在这里 引用dot.js这个库。这个库需要自己下载

<style>
#center{text-align: center;}
#test{text-align: left;}
</style>


</head>
<body>
<div class="mytest" id="mytest">

</div>
<script type="text/javascript">
window.onload = function() {
var temp = doT.template($("#mytemp").html());
//定义一个temp使id为mytemp的标签可以读取dot.JS内的内容
var mes = doT.template($("#mydot").html());
//定义一个mes使id为mydot的标签可以读取dot.JS内的内容
$("#mytest").append(mes);
//将获取的值追加到mytest这个div中
$("#mytest").append(temp);
//将获取的值追加到mytest这个div中
{
<!--定义一个json-->
var json = {
"test": "包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款",<!--找到id为test的标签，使文档内容=test-->
"test1":"包邮 还是快递费还是快乐放假了；爱上法兰克福骄傲了卡夫卡拉升"
};
// var obj = eval(json); <!--使用函数eval将定义的json转化为js对象-->
document.getElementById("test").innerHTML = json.test;<!--输出值-->
document.getElementById("test1").innerHTML=json.test1;

}

};</script>

 

<script id="mydot" type="text/template">

<table class="sui-table table-bordered">
<thead>

<tr>

<th id="center"> </th>
<th id="center">新客户uv</th>
<th id="center">新客户转化率（％）</th>
<th id="center">老客户uv</th>
<th id="center">老客户转化率（％）</th>

</tr>

</thead>
<tbody>
<tr>
<td id="center">昨日</td>
<td id="center">1.0</td>
<td id="center">15</td>
<td id="center">11</td>
<td id="center">1.3</td>
</tr>
<tr>
<td id="center">前日</td>
<td id="center">1.1</td>
<td id="center">32</td>
<td id="center">32</td>
<td id="center">24</td>
</tr>
<tr>
<td id="center">两天前</td>
<td id="center">2.0</td>
<td id="center">24</td>
<td id="center">12.00</td>
<td id="center">1.25</td>
</tr>
<tr>
<td id="center">行业平均</td>
<td id="center">1.30</td>
<td id="center">21</td>
<td id="center">1.07</td>
<td id="center">1.40</td>
</tr>
<tr>
<td id="center">当前现状</td>
<td id="center"><span class="sui-label label-warning">低于平均</span</td>
<td id="center"><span class="sui-label label-info">高于平均</span></td>
<td id="center"><span class="sui-label label-success">持平</span></td>
<td id="center"><span class="sui-label label-warning">低于平均</span></td>
</tr>
</tbody>
</table>
</script>
<script id="mytemp" type="text/template">
<table class="sui-table table-bordered">
<thead>
<tr>
<th colspan="5"> 
<label class="checkbox pull-left">
<input type="checkbox">订单编号：7867473872181848
</label><span class="pull-right">成交时间：2014-01-11 11:59</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="50%">
<div class="typographic">
<img src="http://img04.taobaocdn.com/bao/uploaded/i4/13558026493775867/T1Cs8lFipeXXXXXXXX_!!0-item_pic.jpg_80x80.jpg">
<a href="#" class="block-text"><span id="test"><span></a>
<span>1</span>
<ul class="unstyled">
<li>申请售后</li>
<li>投诉卖家</li>
</ul>
</div>
</td>

<td rowspan="2" width="11%" class="center">56.50</td>
<td rowspan="2" width="13%" class="center">
<ul class="unstyled">
<li>交易成功</li>
<li><a href="#">订单详情</a></li>
<li><a href="#">对方已评</a></li>
</ul>
</td>
<td rowspan="2" width="13%" class="center"><a href="#" class="btn">评价 </a></td>
<td rowspan="2" width="13%" class="center">
<ul class="unstyled">
<li><a href="#">删除</a></li>
<li><a href="#">标记</a></li>
<li><a href="#">分享</a></li>
</ul>
</td>
</tr>
<tr>
<td width="50%">
<div class="typographic">
<img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1hxekXw8dXXXXXXXX_!!0-item_pic.jpg_80x80.jpg">
<a id="test1" href="#" class="block-text"></a>
<span>1</span>
<ul class="unstyled">
<li>申请售后</li>
<li>投诉卖家</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>

</script>

</body>

</html>

I hope this article will be helpful to everyone in learning javascript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery implementation of magnifying glass effect example code_jqueryNext article：jQuery implementation of magnifying glass effect example code_jquery

See more

js implements content display and uses json to transmit data_javascript skills

Related articles