当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

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

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

更新时间:2023-06-20 文章作者:未知 信息来源:网络 阅读次数:

编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

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”时合并行,为“-”时合并列。

【源码下载】

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


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html