编程(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”时合并行,为“-”时合并列。 【源码下载】 如果你不愿复制代码及提高代码准确性,你可以点击:动态生成包含合并单元格的表格 进行本实例源码下载
使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。 |