當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > JS代碼動(dòng)態(tài)生成包含合并單元格的表格

JS代碼動(dòng)態(tài)生成包含合并單元格的表格

2012/10/31 13:07:32作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

JS代碼動(dòng)態(tài)生成包含合并單元格的表格

【實(shí)例描述】

表格的單元格可以使用“colSpan”或“rowSpan”屬性來(lái)合并．但在動(dòng)態(tài)創(chuàng)建表格時(shí)．使用這兩個(gè)屬性卻很困難。本例將演示如何動(dòng)態(tài)生成具有合并單元格的表格。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無(wú)憂（www.wangbatian.cn）</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=[["姓名","年齡","年級(jí)","地址,電話","手機(jī)","備注"],
[null,null,null,"歷史","地理","88888888"],
[null,null,null,null,"本例","66666666"],
[null,null,"一年級(jí)","北京三環(huán)","_","33333333"],
[null,null,"二年級(jí)","上海浦東","_","666666"],
[null,"12","三年級(jí)","廣州深圳","_","33333222"],
[null,null,"四年級(jí)","香港九龍","_","32432432"]];         
//將所有數(shù)據(jù)綁定在數(shù)組中
var myDataT,rowcell=[];
//默認(rèn)的2個(gè)空數(shù)組
document.body.appendChild((myDataT = 
document.createElement("TABLE")));
//在當(dāng)前窗體中動(dòng)態(tài)添加表格
for(var i=0; i<myData.length; i++){  
//遍歷表格中每項(xiàng)
    var atr = myDataT.insertRow();   
//動(dòng)態(tài)添加行
    for(var j=0; j<myData[i].length; j++){
//遍歷某項(xiàng)中的所有數(shù)據(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];   
//顯示行內(nèi)容
        }
    }
}
</script>
</body>
</html>

 

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例使用DOM對(duì)象的一些方法實(shí)現(xiàn)表格的動(dòng)態(tài)創(chuàng)建“createElement”方法用來(lái)創(chuàng)建一個(gè)HTML標(biāo)簽，“appendChild方法將創(chuàng)建的元素添加到文檔中?！皉owSpan”和“colSpan”用來(lái)合并表格。本例的數(shù)組“myData’’對(duì)于合并行和列都有固定的數(shù)據(jù)，為“null”時(shí)合并行，為“-”時(shí)合并列。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：動(dòng)態(tài)生成包含合并單元格的表格 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： JS代碼  表格  單元格