解析json数据将数据填入表格对应的单元格

最新推荐文章于 2024-08-17 23:14:52 发布

jimjiayu

最新推荐文章于 2024-08-17 23:14:52 发布

阅读量6.7k

点赞数 1

分类专栏： jquery 文章标签： ajax

本文链接：https://blog.csdn.net/zhongshijun521/article/details/74331700

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

{
  "code":0,
    "data":{
      "colum":[
        "李慧慧",
        "安杰",
        "赵琦"
      ],
      "data":{
        "2016-02-15":{
          "李慧慧":{
            "SUM(sales)":"145000" }
        },
        "2016-07-05":{
          "李慧慧":{
            "SUM(sales)":"100000" }
        },
        "2016-06-01":{
          "李慧慧":{
            "SUM(sales)":"600000" }
        },
        "2015-12-15":{
          "李慧慧":{
            "SUM(sales)":"136200" }
        },
        "2016-02-10":{
          "李慧慧":{
            "SUM(sales)":"85000" }
        },
        "2016-05-21":{
          "李慧慧":{
            "SUM(sales)":"2000" },
          "安杰":{
            "SUM(sales)":"145000" }
        },
        "2016-03-19":{
          "李慧慧":{
            "SUM(sales)":"45000" }
        },
        "2016-07-26":{
          "安杰":{
            "SUM(sales)":"3000" }
        },
        "2016-08-07":{
          "安杰":{
            "SUM(sales)":"14000" }
        },
        "2016-06-12":{
          "安杰":{
            "SUM(sales)":"5000" }
        },
        "2016-04-15":{
          "李慧慧":{
            "SUM(sales)":"6000" }
        },
        "2016-09-12":{
          "赵琦":{
            "SUM(sales)":"1000" }
        }
      },
      "row":[
        "2015-12-15",
        "2016-02-15",
        "2016-06-01",
        "2016-07-05",
        "2016-09-12",
        "2016-02-10",
        "2016-04-15",
        "2016-05-21",
        "2016-06-12",
        "2016-03-19",
        "2016-08-07",
        "2016-07-26"

      ]
    }

}

展示格式如下：
这里写图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script src="jquery-1.11.3.js"></script>

</head>
<body>
<table class="table table-bordered"></table>
<script>

$(function () {

    $.ajax({
            type:"get",
            url:"test.json",
            dataType:'json',
            success:function (data) {
                queryTable(data);
            }
        });

        function queryTable(data){

        var thead = "<thead><tr  class='danger'><th>";
        var tbody = "<tbody>";
        var th = "";
        $.each(data.data.colum,function (key,value) {
            th = "<th>"+value+"</th>";
            thead += th;
        });
        var tr = "";
        var rowArr = data.data.row;
        var colArr = data.data.colum;
        for(var i=0;i<rowArr.length;i++){
            tr += "<tr><td>"+rowArr[i]+"</td>";
            for(var j=0;j<colArr.length;j++){
                var sumObj = data.data.data[rowArr[i]][colArr[j]];
                if(sumObj){
                    for(var k in sumObj){
                        tr += "<td>"+sumObj[k]+"</td>";
                    }
                }else{
                    tr += "<td></td>";
                }
            }
            tr += "</tr>";
        }
        tbody += tr;
        thead += "</tr></thead>";

       $('.table').append(thead+tbody);

    };
});


</script>
</body>
</html>