网页动态创建表格并实现分页

作者:微赢天下 来源:微赢天下网络科技有限公司www.v678.net 时间:2019-09-29
网页动态创建表格并实现分页

网页动态创建表格并实现分页代码

<html>

</head>

    <title>分页的动态表格</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='网站建设、网页设计、魔方主机、企业邮箱。';

    strData+='网站、手机网站、微信、小程序、APP';//要显示的字符串

var arrData=strData.match(/[\u4e00-\u9fa5]/ig);

var numData=arrData.length;             //文本字符的长度

var numPages=Math.ceil(numData/30);     //返回除以30的上线   

function ShowPage(x)                    //显示指定页的内容

{

    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>"//动态添加表格数据

    }

    strData='<table width="70%" border="5" cellpadding="0" cellspacing="0">'+strData+'</table>';

    document.getElementById("divTable").innerHTML=strData.replace(/<td>undefined<\/td>/ig,"");    //在div内输出表格

}

for (var i=1;i<=numPages;i++)

{

    var str='<button onclick="ShowPage('+i+')">第'+i+'页</button>';  //动态输出翻页按钮

    document.getElementById("divPages").innerHTML+=str;             //在div内输出按钮

}

</script>

网页动态创建表格并实现分页代码分享完毕

声明:本站除转发政府类文章外,其余文章均为原创,未经准许不得转载!