JS循环数组生成html表格

相关文章推荐

豪爽的啄木鸟 · qtableview中不可编辑的单元格 - ...· 3 周前 ·

强健的南瓜 · 如果在reportlab的表格中设置单元格自 ...· 2 周前 ·

强悍的大蒜 · 干货！10分钟，用Python生成图文并茂的 ...· 2 周前 ·

慈祥的黄瓜 · 西班牙正研究是否对加泰前主席发国际逮捕令_手 ...· 1 年前 ·

沉稳的草稿本 · 《结城友奈是勇者：花结的闪耀》即将动画化，勇 ...· 1 年前 ·

飞奔的松树 · 第18话布局 - 都市仙帝：龙王殿 - 包子漫画· 1 年前 ·

ibaobao · 让眼部喝饱胶原蛋白 ...· 1 年前 ·

桃灼婳 · 【免费小说】《在总受文里抢主角攻》by ...· 2 年前 ·

@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)

$('#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)
未完待续...




    

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div id="demo">
    <h2>遍历数组v-for</h2>
    <table border="1px">
            <th v-for="(p,index) in  persons[index]", v-if="index==0">
                {[p]}
            <td v-for="(p,index) in persons">
                {[p]}
    </table>
    <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模块上传与分页功能
        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>
    <meta charset="UTF-8">
    <title>JS循环复杂数据生成表格</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style type="text/css">
    </style>
</head>
<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>
View Code