動態(tài)創(chuàng)建表格并實現(xiàn)分頁JS代碼怎么寫

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

移動端

【實例名稱】

動態(tài)創(chuàng)建表格并實現(xiàn)分頁JS代碼

【實例描述】

表格的內(nèi)容過多時，可以使用分頁效果讓用戶可以更直觀地了解表格內(nèi)容。本例將動態(tài)生成一個帶分頁的表格。

【實例代碼】

<html>
</head>
    <title>分頁的動態(tài)表格-學(xué)無憂（www.wangbatian.cn）</title>
    <style>div,table,td { text-align:center; }</style>
</head>
<body onload="ShowPage(1);">
    <div id="divTable"></div>
    <div id="divPages"></div>
</body>
</html>
<script language="javascript">
var strData='醫(yī)療保健及個人用品類價格同比上漲1.6%。
其中西藥價格下降1.4%，中藥材及中成藥價格上漲7.2%，
醫(yī)療保健服務(wù)價格上漲2.2%。';
    strData+='娛樂教育文化用品及服務(wù)類價格同比下降1.2%。
其中，學(xué)雜托幼費價格下降0.7%.';//要顯示的字符串
var arrData=strData.match(/[\u4e00-\u9fa5]/ig);
var numData=arrData.length;             
//文本字符的長度
var numPages=Math.ceil(numData/30);     
//返回除以30的上線   
function ShowPage(x)                    
//顯示指定頁的內(nèi)容
{
    strData="";
    for (var i=(x-1)*30+1;i<=x*30;i++)
    {
         strData+="<tr><td>"+arrData[i]+"</td>
<td>"+arrData[++i]+"</td><td>"+arrData[++i]+"</td></tr>"
//動態(tài)添加表格數(shù)據(jù)
    }
    strData='<table width="70%" border="5" 
cellpadding="0" cellspacing="0">'+strData+'</table>';
    document.getElementById("divTable").innerHTML=
strData.replace(/<td>undefined<\/td>/ig,"");    
//在div內(nèi)輸出表格
}
for (var i=1;i<=numPages;i++)
{
    var str='<button onclick="ShowPage('+i+')">第'+i+'頁</button>';  
//動態(tài)輸出翻頁按鈕
    document.getElementById("divPages").innerHTML+=str;            
 //在div內(nèi)輸出按鈕
}
</script>

【運行效果】

運行效果