位置:首页 > 网络编程 > html&js
点击展开栏目简介

                                                    

Json:json数据自动转换表格table

分享到: 微信 新浪微博 更多

传入需要渲染的数据render,自动提取JSON数据中的属性变成表格列标题,JSON某个属性的值作为表格数据。

参考链接:https://blog.csdn.net/qq_33745102/article/details/89491674

// EXTRACT VALUE FOR HTML HEADER.
var converter=function (render) {
    //生成各个列
    var col = [];
    for (var i = 0; i < render.length; i++) {
        for (var key in render[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }
    console.log(col);
    //create a table
    var table = document.createElement("table");
    var tr = table.insertRow(-1);                   // TABLE ROW.
    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");      // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }
    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < render.length; i++) {

        tr = table.insertRow(-1);
        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = render[i][col[j]];
        }

    }
    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("viewport");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    return col.length;
}

参考2:https://www.jianshu.com/p/c83a1e5f2437

通常返回的json中会键名是英文的,显示的时候可能需要转换为中文。这种情况可以再后台ajax返回的时候多传一个键名和对应中文名映射数据。


https://gitee.com/run27017/nested-json-to-table

一个将JSON数据转化为各种表格显示的工具,支持复杂的嵌套格式,嵌套的JSON会以合并单元格的方式显示。


上篇:ajax:通过ajax方式上传excel文件导入数据库

发表评论 ​共有​条评论
  • 匿名发表