jquery动态生成表格

//多表头
function getsBigData(dom, gdata, tdata) {
    var row = 0;
    var trs = [];
    var mr = 0;
    var tds = [];
    var countTd = [];
    dom.empty();
    var capTitle = $("#tjQuery option:selected").attr("name");
    var cap = '<caption style="text-align:left;width:150px;font-size:20px;font-weight: bold;line-height: 30px;color:black;marginleft:0px;">' + capTitle + '统计表</caption>';
    dom.append(cap);
    function createHtml(data, mr) {
        var tds = [];
        if (trs.length == mr) {
            trs.push(tds);
        } else {
            tds = trs[mr];
        }
        mr += 1;
        var c = 0;
        var r = 1;
        $.each(data,
        function(i, n) {
            tds.push(n);
            if (n.col && n.col.length > 0) {
                var x = createHtml(n.col, mr);
                n.c = x.c;
                c = c + n.c;
                n.r = x.r + r;
                r = x.r;
            } else {
                countTd.push(n.filename);
                c += 1;
            }
        });
        return {
            c: c,
            r: r
        };
    }
    createHtml(tdata, 0);
    dom.find("tr").remove();
    var html = "";
    $.each(trs,
    function(i, tr) {
        html += "<tr  class='nav_tr1'>";
        $.each(trs[i],
        function(ii, td) {
            var colspan = "";
            var rowspan = "";
            if (td.c && td.c > 1) {
                colspan = "colspan = '" + td.c + "'";
            }
            var rr = ((trs.length - i) - (td.r ? td.r: 0));
            if (rr > 1) {
                rowspan = "rowspan = '" + rr + "'";
            }
            html += "<td " + colspan + " " + rowspan + ">" + td.name + "</td>";
        });
        html += "</tr>";
    });
    dom.append(html);

    //加载表格数据
    if (gdata) {
        for (var i = 0; i < gdata.length; i++) {
            var map = gdata[i];
            var tr = "<tr class='trTabble'>";
            for (var key in map) { 
                if (key == "cityName") {
                    tr = tr + "<td>" + map[key] + "</td>";
                } else if (key == "infomation") {
                    var infomationMap = map[key];
                    for (var ifo in infomationMap) {
                        var ifolist = infomationMap[ifo];
                        if (! (ifolist instanceof Object)) {
                            tr = tr + "<td>" + ifolist + "</td>";
                        } else {
                            var landmap = ifolist;
                            for (var ld in landmap) {
                                tr = tr + "<td>" + landmap[ld] + "</td>";
                            }
                        }
                    } 
                }
            } tr += "</tr>";
            dom.append(tr);
        }
    }

}

这是生成动态的表头(包含跨行和跨列),其中第一个参数是你要渲染的table,gdata这个参数是表格的内容,tdata这个是表头,其中表头的格式是这样的

var tdata=[
          {name:'行政区',filename:'xzqmc',key:'xzqh'},
            {name:'划拨',filename:'',col:[
                                            {name:'宗地数',filename:'hbzds'},
            {name:'面积 ',filename:'hbmj'},
            {name:'价款总额',filename:'hbjk'}
            ]},
            {name:'作价出资(入股)',filename:'',col:[
                                              {name:'宗地数',filename:'zjczzds'},
                                              {name:'面积',filename:'zjczmj'},
                                              {name:'价款总额',filename:'zjczjk'}
                ]}
            ];

如果你觉得这样复杂,可以继续修改

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值