?? 9.22 動態生成包含合并單元格的表格.htm
字號:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁</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>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -