软件学堂

网游分类软件分类

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

2012-10-31 来源:网络

【实例名称】

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

【实例描述】

表格的单元格可以使用“colSpan”或“rowSpan”属性来合并.但在动态创建表格时.使用这两个属性却很困难。本例将演示如何动态生成具有合并单元格的表格。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <style> 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 } </style>

</head> <body> <script language="JavaScript"> 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<myData.length; i++){  //遍历表格中每项     var atr = myDataT.insertRow();   //动态添加行     for(var j=0; j<myData[i].length; 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];   //显示行内容         }     } } </script> </body> </html>

 

【运行效果】

运行效果

【难点剖析】

本例使用DOM对象的一些方法实现表格的动态创建“createElement”方法用来创建一个HTML标签,“appendChild方法将创建的元素添加到文档中。“rowSpan”和“colSpan”用来合并表格。本例的数组“myData’’对于合并行和列都有固定的数据,为“null”时合并行,为“-”时合并列。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:动态生成包含合并单元格的表格 进行本实例源码下载 

上一篇:提示找不到dxgi.dll怎么办
下一篇:种子怎么用,快播播放BT种子方法

相关文章