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

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

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

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

显示示例

直接代码

<!-- 样式 -->
<style>
    .tableDiv { 
        width: 600px;
        font-size: 12px;
        margin: 10px auto;
        border: 1px solid #eee;
        border-collapse: collapse;
    } 
    .tableDiv .trDiv{
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #eee
    }
    .tableDiv .trDiv:last-child{
        border-bottom: none;
    }
    .tableDiv .trDiv .tdDiv{
        flex: 1;
        border-right: 1px solid #eee;
        box-sizing: border-box;
        text-align: center;
        padding: 20px;
    }
    .tableDiv .trDiv .tdDiv:last-child{
        border-right: none;
    }
    .labelTitle{
        font-weight: bold;
        padding-right: 10px;
    }
    .labelSpan{
        color: red;
    }
</style>

<!-- 页面元素 -->
1.一维数组形式
    <div class="tableDiv table0"></div>
2.对象数组，键值对形式
    <div class="tableDiv table1"></div>
3.JSON对象形式
    <div class="tableDiv table2"></div>

$(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<lenRow; i++){
                var trDiv=$("<div class='trDiv'></div>");
                for(var j=0; j<op; j++){
                    tableStaticNew[i][j] = tableStaticNew[i][j] == undefined? '' : tableStaticNew[i][j];
                    var tdDiv = $("<div class='tdDiv'>"+tableStaticNew[i][j]+"</div>");
                    trDiv.append(tdDiv);
                }
                $(".table"+status).append(trDiv)
            }
        }
        // 对象类型
        function referenceType(len,op,static){
            var tableStaticNew = commonType(len,op,static);
            for(var i=0; i<lenRow; i++){
                var trDiv=$("<div class='trDiv'></div>");
                for(var j=0; j<op; j++){
                    tableStaticNew[i][j]=tableStaticNew[i][j] == undefined ? {"key":"","val":""} : tableStaticNew[i][j];
                    var tdDiv = $("<div class='tdDiv'><span class='labelTitle'>"+tableStaticNew[i][j].key+"</span><span class='labelSpan'>"+tableStaticNew[i][j].val+"</span></div>");
                    trDiv.append(tdDiv);
                }
                $(".table"+status).append(trDiv)
            }
        }
        // 将数据按一行排列op个，分成len行，返回一个新数组
        function commonType(len,op,static){
            var tableStaticNew = [];
            lenRow = len%op == 0 ? parseInt(len/op) : parseInt(len/op)+1;
            for(var i=0;i<len; i+=op){
                tableStaticNew.push(static.slice(i,i+op));
            }
            console.log(tableStaticNew)
            return tableStaticNew
        }
    }
    tableRender(table1Static,0,4)//一维数组，一行4个
    tableRender(table2Static,1,4)//对象数组，一行4个
    tableRender(table3Static,2,3)//JSON对象，一行3个
})

场景不同，实现方案也不尽相同，本是参杂php语法if condition/empty等判断，效果也实现了；这是后来js判断写的demo，记录下