bootstrap 遍历json数据添加表格内容

最新推荐文章于 2021-12-08 16:09:09 发布
NotBad_1
最新推荐文章于 2021-12-08 16:09:09 发布
阅读量9.2k
点赞数 5
分类专栏： bootstrap
本文链接：https://blog.csdn.net/notbad_/article/details/53813841
版权
bootstrap 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<!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>