根据返回数据显示成table样式（个数不定，去空数据）

需求：后台返回的各种数据列表，需要展现成table样式

问题：字段显示不固定、为空不显示等，不适用table直接显示；
自定义，也有可能出现边框不一致，如数据为空时缺少边框、边框重叠等

解决：引用jq，js判断，将原本数据结构按要求重新定义，补空为m*n的数据结构，再生成相应的元素。
为了区别table，标签直接使用div

显示示例

exam.png

直接代码

1.一维数组形式
    

2.对象数组，键值对形式
    

3.JSON对象形式
    

$(function(){
    // 三种模拟数据
    var table1Static=[1,23,4,5,44,7,'',,78,9,88,2];
    var table2Static=[{"key":"字段1","val": "322323"},{"key":"字段2","val": "15155"},{"key":"字段3","val": ""},{"key":"字段4","val": "丰富多彩的"},{"key":"字段5","val": "丰富多彩的"}];
    var table3Static={"字段1": "","字段2": "55555","字段3": "","字段4":"丰富多彩的","字段5": "丰富多彩的","字段6": "丰富多彩的"};

    function tableRender(static, status, op){
        // op为表格数据一行显示几个,这里为3
        // status数据结构，其中
        // 0为1维数组[,,,...]
        // 1为对象数组[{"key":"","val":""},{"key":"","val":""},...]
        // 2为json对象{"":"","":"",...}
        var len = static.length,
            lenRow;
        if(status == 0){
            static = static.filter(item=>item!='');
            baseType(len,op,static)
        }else if(status == 1){
            static = static.filter(item=>item.val!='');
            len = static.length;
            referenceType(len,op,static)
        }else if(status == 2){
            var staticNew = [];
            for(var i in static){
                if(static[i] != ''){
                    staticNew.push({"key":i,"val":static[i]})
                }   
            }
            len=staticNew.length;
            static = staticNew;
            referenceType(len,op,static)
        }else{
            // ...
        }

        // 一维数组形式
        function baseType(len,op,static){
            var tableStaticNew = commonType(len,op,static);//len*op的新数组
            for(var i=0; i

"); for(var j=0; j"+tableStaticNew[i][j]+"

"); trDiv.append(tdDiv); } $(".table"+status).append(trDiv) } } // 对象类型 function referenceType(len,op,static){ var tableStaticNew = commonType(len,op,static); for(var i=0; i