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

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

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

移動端

【實例名稱】

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

【實例描述】

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

【實例代碼】

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

 

【運行效果】

運行效果

【難點剖析】

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

【源碼下載】

如果你不愿復制代碼及提高代碼準確性，你可以點擊：動態(tài)生成包含合并單元格的表格 進行本實例源碼下載 

標簽： JS代碼  表格  單元格