JS循環數組生成html表格

時間 2019-11-12

原文原文鏈接

JS操做方法一

JSON數組

@app.route('/',methods=['GET','POST'])
def index():
    if request.method == 'GET':
        return render_template('test1.html')
    else:
        res=[
            ['歷史沿革','詳細信息','時間信息'],
            ['1998-10-19','中信集團xxx','2019-05-11'],
            ['1998-10-19','上海滬龍國際','2019-05-11'],
            ['1998-10-19','重慶三原色','2019-05-11'],
            ['1998-10-19','陝西君讓科技','2019-05-11'],
            ['1998-10-19','濟南鋼鐵','2019-05-11'],
            ['1998-10-19','安徽新潮','2019-05-11'],
            ['1998-10-19','山東藍翔','2019-05-11'],
            ['1998-10-19','北京電影','2019-05-11'],
            ['1998-10-19','杭州阿里集團','2019-05-11'],
            ['1998-10-19','深圳華爲','2019-05-11'],
            ['1998-10-19','浙江天心科技','2019-05-11'],
        ]
        return jsonify(res)

後端代碼

JS代碼

$('#submit').click(function () {
        $.ajax({
            url: '/',
            type: 'POST',
            success: function (args) {
                var str = "";
                str += "<table border='solid'>";
                for (var i = 0; i < args.length; i++) {//該數組爲嵌套數組[[xx],[xx],[xx]]形式
                    if (i === 0) {    //取第一個數組爲表頭
                        str += "<tr>";
                        for (var j = 0; j < args[i].length; j++) {
                            str += " <th>" + args[i][j] + "</th>";
                        }
                        str += "</tr>";
                    }else {
                        str += "<tr>"; //循環取數組的值生成html代碼
                        for (var k = 0; k < args[i].length; k++) {
                            str += " <td>" + args[i][k] + "</td>";
                        }
                        str += "</tr>";
                    }
                }
                str += "</table>";
                document.getElementById('info').innerHTML=str
                console.log(str)
            }
        })
    });

顯示效果

未完待續...javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo">
    <h2>遍歷數組v-for</h2>
    <table border="1px">
        <tr >
            <th v-for="(p,index) in  persons[index]", v-if="index==0">
                {[p]}
            </th>
        </tr>
        <tr>
            <td v-for="(p,index) in persons">
                {[p]}
            </td>
        </tr>
    </table>

    <br>
    <button @click="setorder">點我</button>

</div>

<script type="text/javascript" src="../static/JS/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../static/JS/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#demo',
        delimiters:['{[', ']}'],
        data: {
            i:[],
            persons:''
        },
        methods: {
            setorder(){
                $.ajax({
                    url:'/',
                    type:'POST',
                    success:function (data) {
                        vm.persons = data

                        
                    }
                })
            }
        }

    })
</script>
</body>
</html>

未解決VUE處理問題

JS操做方法二(複雜版)

利用了 layui模塊上傳與分頁功能css

        data = [[{'字段0': {'字典k0': '數據1', '字典K1': '數據2', '字典K2': 0},
                  '字段1': {'字典k0': '數據4', '字典K1': '數據5', '字典K2': 1},
                  '字段2': {'字典k0': '數據7', '字典K1': '數據8', '字典K2': 1},
                  '字段3': {'字典k0': '數據10', '字典K1': '數據11', '字典K2': 1}},
                 {'字段0': {'字典k0': '數據1', '字典K1': '數據2', '字典K2': 0},
                  '字段1': {'字典k0': '數據4', '字典K1': '數據5', '字典K2': 0},
                  '字段2': {'字典k0': '數據7', '字典K1': '數據8', '字典K2': 0},
                  '字段3': {'字典k0': '數據10', '字典K1': '數據11', '字典K2': 1}},
                 {'字段0': {'字典k0': '數據1', '字典K1': '數據2', '字典K2': 0},
                  '字段1': {'字典k0': '數據4', '字典K1': '數據5', '字典K2': 1},
                  '字段2': {'字典k0': '數據7', '字典K1': '數據8', '字典K2': 0},
                  '字段3': {'字典k0': '數據10', '字典K1': '數據11', '字典K2': 1}}],
                [{'字段0': {'字典k0': '數據1', '字典K1': '數據2', '字典K2': 0},
                  '字段1': {'字典k0': '數據4', '字典K1': '數據5', '字典K2': 0},
                  '字段2': {'字典k0': '數據7', '字典K1': '數據8', '字典K2': 0},
                  '字段3': {'字典k0': '數據10', '字典K1': '數據11', '字典K2': 0}}, ]]

HTML與JS以下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS循環複雜數據生成表格</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style type="text/css">

    </style>

</head>
<body>
<div><button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上傳文件</button></div>
<div id="demo1"></div>
<div id="my_table"></div>


<script type="text/javascript" src="../static/JS/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../static/layui/layui.js"></script>
<script type="text/javascript">
    let str = '';
    function tableCreate(data, ps, pd) {
        var table_head = ['表頭0', '表頭1', '表頭2', '表頭3'];
        var table_info1 = ['字段0', '字段1', '字段2', '字段3'];
        var table_info2 = ['字典k0', '字典K1', '字典K2'];
        for (var k = ps; k < pd && (datas = data[k]); k++) {
            str += "<h2>" + '第' + (k + 1) + "</h2>"; //標題
            for (var v = 0, len = datas.length; v < len && (person = datas[v]); v++) {   //第一次循環：data爲服務端傳過來的原始數據 爲array
                str += "<br><br>";
                str += "<table class = 'layui-table' lay-even style='table-layout:fixed'>"; //拼接表格html
                str += '<colgroup>\n' +
                    '<col width="120">\n' +
                    '<col width="480">\n' +
                    '<col width="480">\n' +
                    '<col width="90">\n' +
                    '</colgroup>';
                str += "<thead>" + '\n' + "<tr>";
                for (var j = 0, len1 = table_head.length; j < len1 && (person1 = table_head[j]); j++) { //第二次循環：tabel_head 爲定義的表頭
                    str += "<th>" + person1 + "</th>" //生成表頭的html}
                }
                str += "</tr>" + '\n' + "</thead>";
                for (var i = 0, len2 = table_info1.length; i < len2 && (person2 = table_info1[i]); i++) {  //第三次循環：table_info1爲 定義好的四要素（由於data下一層的數據爲字典）
                    str += "<tr>";
                    str += "<td>" + person2 + "</td>";
                    //for (var k = 0, len3 = person[person2].length; k < len3 && (person3 = person[person2][k]); k++) {  //第四次循環：根據data[v][table_info1[i]]即可肯定取那一行
                    for (var l = 0, len3 = table_info2.length; l < len3 && (person3 = table_info2[l]); l++) {                  //改完數據結構針對字典狀況
                        if (person[person2][table_info2[2]] === 1) {       //判斷 字典下的數組中第三位元素值是否爲1
                            person[person2][table_info2[2]] = '不一致'   //更改成 中文不一致
                        }
                        if (person[person2][table_info2[2]] === '不一致') {
                            str += "<td class='error'>" + person[person2][person3] + "</td>"  //若是不一致 加入red樣式顏色
                        } else {
                            person[person2][table_info2[2]] = '一致';
                            str += "<td>" + person[person2][person3] + "</td>"
                        }
                    }
                    //}
                    str += "</tr>";
                }
                str += "</table>";
            }
        }
        return str
    }

    layui.use('upload', function () {
        var upload = layui.upload;
        //執行實例
        var uploadInst = upload.render({
            elem: '#test1' //綁定元素
            , url: '/' //上傳接口
            , accept: 'file'  //支持的數據類型 ：file表明全部文件
            , exts: 'docx'    //容許的文件後綴
            , size: 100       //文件大小
            , before: function (obj) { //obj參數包含的信息，跟 choose回調徹底一致，可參見上文。
                $("#loading1").fadeIn(100);
            }//上傳loading
            , done: function (res) {
                console.log(res);
                //document.getElementById("my_table").innerHTML = str;
                layui.use('laypage', function () {
                    var laypage = layui.laypage;
                    //執行一個laypage實例
                    laypage.render({
                        elem: 'demo1' //注意，這裏的 test1 是 ID，不用加 # 號
                        , limit: 5
                        , count: res.length //數據總數，從服務端獲得
                        , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                        , jump: function (obj) {
                            //console.log(obj.limit);  //單頁的容量
                            //console.log(obj.count)   //總數量
                            //console.log(obj.curr)    //當前的頁碼
                            //模擬渲染
                            str = '';
                            var pagestart = (obj.curr - 1) * obj.limit;
                            var pageend = obj.curr * obj.limit;
                            tableCreate(res, pagestart, pageend);
                            //console.log(str)
                            document.getElementById('my_table').innerHTML = str;
                            $('html ,body').animate({scrollTop: 0}, 0);
                        }
                    })
                });
                $("#loading1").fadeOut(100); //關閉loading
            }
            , error: function () {
                //請求異常回調
                console.log('異常了')
                $("#loading1").fadeOut(100); //關閉loading
            }
        });
    });

</script>

</body>
</html>