html 生成表单自动合并,JS代码动态生成包含合并单元格的表格

标题页-学无忧(www.xue51.com)

TABLE{

font-family: 宋体;

font-size: 9pt;

border-color:#7195c6;

border-collapse :collapse;

border-width:1px

}

td{

border:#336699 1px solid;

font-size:15px;

color:#02027a

}

var myData=[["姓名","年龄","年级","地址,电话","手机","备注"],

[null,null,null,"历史","地理","88888888"],

[null,null,null,null,"本例","66666666"],

[null,null,"一年级","北京三环","_","33333333"],

[null,null,"二年级","上海浦东","_","666666"],

[null,"12","三年级","广州深圳","_","33333222"],

[null,null,"四年级","香港九龙","_","32432432"]];

//将所有数据绑定在数组中

var myDataT,rowcell=[];

//默认的2个空数组

document.body.appendChild((myDataT =

document.createElement("TABLE")));

//在当前窗体中动态添加表格

for(var i=0; i

//遍历表格中每项

var atr = myDataT.insertRow();

//动态添加行

for(var j=0; j

//遍历某项中的所有数据

if (myData[i][j]==null){

//如果值为空，表示需要合并

rowcell[j].rowSpan++;

//使用rowspan

}

else if(myData[i][j]=="_"){

//如果是_，则使用colspan

rowcell[j-1].colSpan++;

}

else{

rowcell[j] = atr.insertCell();

//否则正常添加行

rowcell[j].innerText=myData[i][j];

//显示行内容

}

}

}