jquery动态生成表格

来源：互联网发布：网络推手阿建可以信赖编辑：程序博客网时间：2024/04/29 14:07

//多表头
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'}
]}
];如果你觉得这样复杂，可以继续修改

0 0