當前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > 使用JavaScript向表格中寫入數(shù)據(jù)

使用JavaScript向表格中寫入數(shù)據(jù)

2012/10/31 20:21:44作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

使用JavaScript向表格中寫入數(shù)據(jù)

【實例描述】

本例向表格中寫入數(shù)據(jù)，類似于在表格中動態(tài)插入單元行。不同的是在插入的同時指定單元格的內(nèi)容，并通過一個方法提高代碼的復(fù)用性。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-學(xué)無憂（wangbatian.cn）</title>
</head>
<body>
<script language="JavaScript">
//---變量----------釋義--
//idNumber -------音樂編號
//songName----------音樂名稱
//mCompany-------制作公司
//mSinger--------演唱歌手
//mPlace---------發(fā)行區(qū)域
//mKind----------音樂類型
//mTime----------加入日期
//mSize----------音樂大小
//mType----------音樂格式
//mUrl-----------音樂地址
//mHits----------點播次數(shù)
function createTR(idNumber,songName,mPlace,mCompany,mSinger)
{
 document.writeln("<TR onmouseover=\"this.style.backgroundColor=
'#FFccdd';this.style.color='BLUE'\" onmouseout=
\"this.style.backgroundColor='';this.style.color=''\">");
        document.writeln("<TD height=10>"+idNumber+"</TD>"); 
        document.writeln("<TD height=10><a href='#'>"+songName+"</a></TD>");
        document.writeln("<TD height=10>"+mPlace+"</TD>"); 
        document.writeln("<TD height=10>"+mCompany+"</TD>");            
        document.writeln("<TD height=10>"+mSinger+"</TD>");
        document.writeln("</TR>");
}
</script>
<TABLE width="90%" bgcolor="#BCBCBC" cellSpacing=1 
cellPadding=0 align=center border=1>
 <TR>
    <Th width="20%">音樂編號</Th> 
    <Th width="20%">音樂名稱</Th> 
    <Th width="20%">發(fā)行區(qū)域</Th> 
    <Th width="20%">所屬公司</Th> 
    <Th width="20%">演唱歌手</Th> 
 </TR>
<TR>
<script>
createTR("編號1","歌曲名稱1","中國大陸","公司1","歌手1");
createTR("編號2","歌曲名稱2","中國香港","公司2","歌手2");
createTR("編號3","歌曲名稱3","中國臺灣","公司3","歌手3");
createTR("編號4","歌曲名稱4","中國澳門","公司4","歌手4");
createTR("編號5","歌曲名稱5","中國大陸","公司5","歌手5");
</script>
</TR>
</table></body>
</html>

 

【運行效果】

運行效果

【難點剖析】

本例的效果類似于一個音樂選播器，代碼中自定了一個“createTR”方法，可實現(xiàn)動態(tài)表格行的插入。插人的內(nèi)容由指定的參數(shù)獲取。注意如果要在文檔中輸出一行，使用“document．writeln”，而不是“document．write”。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準確性，你可以點擊：使用JavaScript向表格中寫入數(shù)據(jù) 進行本實例源碼下載 

標簽： JavaScript  表格  數(shù)據(jù)