<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
</style>
</head>
<body>
<table border="1px solid #ccc" style="border-collapse:collapse;" id="table">
<tr>
<th>索引</th>
<th>姓名</th>
<th>证件类型</th>
<th>证件号</th>
<th>手机号</th>
<th>出生日期</th>
</tr>
<tbody id="content">
</tbody>
<tbody id="content1">
</tbody>
</table>
<div id="info" style="border: 1px solid #ccc; text-align: center; display: none;">
<p>编号：<span id="id"></span></p>
<p>姓名：<span id="name"></span></p>
<p>证件类型：<span id="iden"></span></p>
<p>证件号：1111</p>
<p>手机号：<span id="phone"></span></p>
<p>出生日期：<span id="add"></span></p>
<p>所在地：北京</p>
<p> <span>取消</span> <span id="btn">确定</span></p>
</div>
</body>
<script type="text/html" id="test">
{{if flag}}
{{each orderArray as value}}
<tr>
<td>{{value.id}}</td>
<td>{{value.name}}</td>
{{each value.identity as v}}
{{each v.id_type as vi}}
<td>{{vi.name}}</td>
{{/each}}
<td>{{v.id}}</td>
{{/each}}
<td>{{value.phone}}</td>
<td>{{value.date_of_birth}}</td>
</tr>
{{/each}}
{{/if}}
</script>
<script type="text/html" id="test1">
{{if flag}}
{{each allList as value}}
<tr>
<td>{{value.id}}</td>
<td>{{value.name}}</td>
{{each value.identity as v}}
{{each v.id_type as vi}}
<td>{{vi.name}}</td>
{{/each}}
<td>{{v.id}}</td>
{{/each}}
<td>{{value.phone}}</td>
<td>{{value.date_of_birth}}</td>
</tr>
{{/each}}
{{/if}}
</script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./template.js"></script>
<script>
var data;
function getTestData() {
data = {
"flag": true,
"allList": [{
"id": "1",
"name": "张三1111111111111", //用户名
"identity": [ //证件类型
{
"id_type": [{
"id": 1,
"name": "身份证"
}],
"id": "110105199408286510"
}
],
"phone": "15210329866", //手机号
"date_of_birth": "19940828", //出声日期
"address": "北京", //地址
}],
"orderArray": [{
"id": "1",
"name": "张三", //用户名
"identity": [ //证件类型
{
"id_type": [{
"id": 1,
"name": "身份证"
}],
"id": "110105199408286510"
}
],
"phone": "15210329866", //手机号
"date_of_birth": "19940828", //出声日期
"address": "北京", //地址
}, {
"id": "2",
"name": "赵四",
"identity": [{
"id_type": [{
"id": 1,
"name": "身份证"
}],
"id": "110105199508286510"
}],
"phone": "15210329877",
"date_of_birth": "19950828",
"address": "北京",
}, {
"id": "3",
"name": "王五",
"identity": [{
"id_type": [{
"id": 2,
"name": "护照"
}],
"id": "G49331247"
}],
"phone": "15210329877",
"date_of_birth": "20010124",
"address": "上海",
}]
};
// var orderArray = data.orderArray
// console.log(data.orderArray)
$('#content').html(template('test', data))
$('#content1').html(template('test1', data))
}
function clicked(id){
var o, i;
o = document.getElementById(id).rows;//表格所有行
for(i = 0; i < o.length; i++){
o[i].ondblclick = function(){ //设置事件
var id,oo,op,oq,or;
id = this.cells[0];
oo = this.cells[1];
op = this.cells[2];
oq = this.cells[4];
or = this.cells[5];
// alert(oo)
document.getElementById('id').innerHTML=id.innerHTML;
document.getElementById('name').innerHTML=oo.innerHTML;
document.getElementById('iden').innerHTML=op.innerHTML;
document.getElementById('phone').innerHTML=oq.innerHTML;
document.getElementById('add').innerHTML=or.innerHTML;
document.getElementById('info').style.display='block';
document.getElementById('btn').onclick=function () {
document.getElementById('info').style.display='none';
}
}
}
}
getTestData();
clicked('table')
</script>
</html>