html中table表格分页
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
//注:样式有点丑,但是功能是实现的,按照的是每页显示10数据加一行表头var mytable;
var my_new_table;
var my_href1;
var my_href2;
var temp1=0;
var temp2=0;
var flag1 = false;
var flag2 = false;
var flag3 = false;
var trows=0;
var pags = 0;
var count=0;
function test()
{
mytable = document.getElementById("mtable");
trows =mytable.rows.length;
if (trows%10==0)
{
pags=trows/10;
}
else
{
pags = parseInt(trows/10)+1;
}
if(trows>10)
{
//隐藏mytable表格
mytable.style.display="none";
//则需要调用一个函数,将表格分页
showTable();
for (var i=0;i { if (i==0) document.getElementById('mtable'+i).style.display="block"; else document.getElementById('mtable'+i).style.display="none"; } showLink(); } } function showLink() { my_div = document.createElement("div"); //div属性 my_div.id="div2"; my_div.onclick="test2()"; my_div.style.marginTop="68px"; my_div.style.width="500px"; my_div.style.height="32px"; my_div.style.backgroundColor="pink"; document.getElementById('div1').appendChild(my_div); //超链接1 my_href1 = document.createElement("a"); //超链接1属性 my_href1.id="mf1"; my_href1.href="#"; my_href1.style.marginLeft="330px"; my_href1.innerText="上一页"; //超链接2 my_href2 = document.createElement("a"); //超链接2属性 my_href2.id="mf2"; my_href2.href="#"; my_href2.style.marginLeft="20px"; my_href2.innerText="下一页"; //添加到div2中去 flag1 = document.getElementById('div2').appendChild(my_href1); flag2 = document.getElementById('div2').appendChild(my_href2); addEvent(); } function addEvent() //点击上一页 if (flag1) { var et1 = document.getElementById("mf1"); et1.onclick = function () { if (temp2>0) { temp2-=1; for (var i=0;i { if (i==temp2) document.getElementById('mtable'+i).style.display="block"; else document.getElementById('mtable'+i).style.display="none"; } } }; } //点击下一页 if (flag2) { var et2 = document.getElementById("mf2"); et2.onclick = function () { //注意此处条件要为pags-1 不然会显示出来一个空的table表 if (temp2 { temp2+=1; for (var i=0;i { if (i==temp2) document.getElementById('mtable'+i).style.display="block"; else document.getElementById('mtable'+i).style.display="none"; } } }; } } //完成创建共有多少张表 function showTable()