<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10"/>
<script src="static/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="static/bootstrap/2.3.1/css_cerulean/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<script src="static/bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<link href="static/bootstrap/2.3.1/awesome/font-awesome.min.css" type="text/css" rel="stylesheet"/>
<!--[if lte IE 7]>
<link href="static/bootstrap/2.3.1/awesome/font-awesome-ie7.min.css" type="text/css" rel="stylesheet"/>
<![endif]-->
<!--[if lte IE 6]>
<link href="static/bootstrap/bsie/css/bootstrap-ie6.min.css" type="text/css" rel="stylesheet"/>
<script src="static/bootstrap/bsie/js/bootstrap-ie.min.js" type="text/javascript"></script>
<![endif]-->
<link href="static/common/jeesite.css" type="text/css" rel="stylesheet"/>
<script src="static/common/jeesite.js" type="text/javascript"></script>
<style>
.table{
background-color: #fff;
margin-bottom: 20px;
}
.table caption{
position: relative;
height: 46px;
line-height: 46px;
padding-left: 50px;
padding-right: 40px;
text-align: left;
font-size: 21px;
color: #0088CC;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
}
.table caption .btn-group{
float: right;
}
.table td, .table th{
text-align: center;
vertical-align: middle;
}
select{
width:90%;
margin-bottom: 0;
}
</style>
</head>
<body>
<table id="inspectorTable" class="table table-bordered table-striped">
<caption>
指派建查员
<div class="btn-group">
<a οnclick="addInspctor(json2);" class="btn btn-primary add" href="#">
<i class="icon-plus"></i>
增加
</a>
</div>
</caption>
<thead>
<tr>
<th width="10%">姓名</th>
<th width="10%">组长</th>
<th width="10%">品级</th>
<th width="10%">指派时间</th>
<th width="10%">电话</th>
<th width="15%">所在地</th>
<th width="15%">特殊原因</th>
<th width="10%">备注</th>
<th width="10%">编辑</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="table2" class="table table-bordered table-striped">
<caption>
指派检查员企业信息
<div class="btn-group">
<a class="btn btn-primary" href="#">
<i class="icon-plus"></i>
指派检查员
</a>
<a class="btn btn-primary" href="#">
<i class="icon-plus"></i>
解除指派
</a>
<a class="btn btn-primary" href="#">
<i class="icon-plus"></i>
查看全部指派状态信息
</a>
<a class="btn btn-primary" href="#">
<i class="icon-plus"></i>
已指派状态信息修改
</a>
</div>
</caption>
<thead>
<tr>
<th width="10%">受理编号</th>
<th width="10%">企业名称</th>
<th width="5%">联系人</th>
<th width="10%">联系电话</th>
<th width="10%">认证范围</th>
<th width="10%">企业所在地</th>
<th width="10%">检查开始时间</th>
<th width="10%">检查结束时间</th>
<th width="10%">查看开始时间</th>
<th width="10%">查看结束时间</th>
<th width="5%">编辑</th>
</tr>
</thead>
<tbody>
<tr>
<td>受理编号</td>
<td>受理编号</td>
<td>受理编号</td>
<td>受理编号</td>
<td>受理编号</td>
<td>受理编号</td>
<td>受理编号</td>
<td>受理编号</td>
<td>受理编号</td>
<td>受理编号</td>
<td><a class="delete">删除</a></td>
</tr>
</tbody>
</table>
<script>
var json1 =[
{ 'id':'1','name': '张三', 'zuzhang': '1', 'pin': 'A', 'time': '2010', 'tel': '12345678901', 'dizhi': '江苏', 'teshu': '1', 'beizhu': '有事'},
{ 'id':'2','name': '张三', 'zuzhang': '0', 'pin': 'A', 'time': '2010', 'tel': '12345678901', 'dizhi': '江苏', 'teshu': '0', 'beizhu': ''}
];
var json2 =[
{ 'id':'1','name': '张三','lian':'张三','xi':'123', 'zuzhang': '1', 'pin': 'A', 'time': '2010', 'tel': '12345678901', 'dizhi': '江苏', 'teshu': '1', 'beizhu': '有事'},
{ 'id':'2','name': '张三','lian':'张三','xi':'123', 'zuzhang': '0', 'pin': 'A', 'time': '2010', 'tel': '12345678901', 'dizhi': '江苏', 'teshu': '0', 'beizhu': ''}
];
//检查是否重复
function checkValid(table,id){
var isValid = true;
var $htr=table.find("tr");
$.each($htr,function(i,n){
if($(n).attr("id") == id){
isValid = false;
return false;
}
});
return isValid;
}
//增加检查员
function addInspctor(json){
var self=$("#inspectorTable");
var $tr='';
$.each(json, function (i, n) {
if(!checkValid(self,n.id)) return false;
$tr += '<tr id="'+n.id+'">';
$tr += '<td>' + n.name + '</td>';
$tr += '<td><input type="checkbox"' + (n.zuzhang == '1' ? ' checked': '') + '/></td>';
$tr += '<td>' + n.pin + '</td>';
$tr += '<td>'+n.time+'</td>';
$tr += '<td>'+n.tel+'</td>';
$tr += '<td>'+n.dizhi+'</td>';
$tr += '<td><input type="checkbox"' + (n.teshu == '1' ? ' checked': '') + '/></td>';
$tr += '<td>' + n.beizhu + '</td>';
$tr += '<td><a class="delete">删除</a></td>';
$tr += '</tr>';
});
self.append($tr);
}
addInspctor(json1);
// 删除行
$(".delete").click(function(){
$(this).parents("tr").remove();
return false;
});
function addCom(json){
var self=$("#table2");
var $tr='';
$.each(json, function (i, n) {
if(!checkValid(self,n.id)) return false;
$tr += '<tr id="'+n.id+'">';
$tr += '<td>' + n.name + '</td>';
$tr += '<td>'+n.lian+'</td>';
$tr += '<td>'+n.xi+'</td>';
$tr += '<td>'+n.zuzhang+'</td>';
$tr += '<td>' + n.pin + '</td>';
$tr += '<td>'+n.time+'</td>';
$tr += '<td>'+n.tel+'</td>';
$tr += '<td>'+n.dizhi+'</td>';
$tr += '<td>'+n.teshu+'</td>';
$tr += '<td>' + n.beizhu + '</td>';
$tr += '<td><a class="delete">删除</a></td>';
$tr += '</tr>';
});
self.append($tr);
}
addCom(json2);
</script>
</body>
</html>
bootstrap 遍历json数据添加表格内容
最新推荐文章于 2021-06-08 11:53:42 发布