求一个用js做的表单分页

yitiao520025 2009-03-31 12:13:59

求一个用js做的表单分页，最好是有实例的
哪位好心人给我发邮箱 psun@126.com
不甚感激~！

...全文

136 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

ameyume 2009-03-31

打赏
举报

JS实现多行的HTML静态表格分页代码
本文来自: IT知道网(http://www.itwis.com) 详细出处参考：http://www.itwis.com/html/programme/javascript/20071122/565_2.html

tianxuan2008 2009-03-31

打赏
举报

学习

RiverOfLove 2009-03-31

打赏
举报

这个问题太好了，我也很疑惑啊！楼上那哥们儿谢谢了。学知识了！

cntmi 2009-03-31

打赏
举报



<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>表格分页显示</title>



</head>



<body>

<div id="divTable">

<table  border="1" cellpadding="0" cellspacing="0" id="tab1">

<tbody><tr>

<td width="73"> 序号</td>

<td width="223"> 标题</td>

<td width=80> 作者</td>

<td width=100> 发表时间</td></tr>



<tr height="20">

<td width="73">00</td>

<td width="223" align="left"><a href="###">00</a></td>

<td width=80>00</td>

<td width=100>00</td></tr>



<tr  height="20">

<td width="73">11</td>

<td width="223" align="left"><a href="###">11</a></td>

<td width=80>11</td>

<td width=100>11</td></tr>



<tr  height="20">

<td width="73">22</td>

<td width="223" align="left"><a href="###">22</a></td>

<td width=80>22</td>

<td width=100>22</td></tr>



<tr  height="20">

<td width="73">33</td>

<td width="223" align="left"><a href="###">33</a></td>

<td width=80>33</td>

<td width=100>33</td></tr>



<tr  height="20">

<td width="73">44</td>

<td width="223" align="left"><a href="###">44</a></td>

<td width=80>44</td>

<td width=100>44</td></tr>



<tr  height="20">

<td width="73">55</td>

<td width="223" align="left"><a href="###">55</a></td>

<td width=80>55</td>

<td width=100>55</td></tr>



<tr  height="20">

<td width="73">66</td>

<td width="223" align="left"><a href="###">66</a></td>

<td width=80>66</td>

<td width=100>66</td></tr>



<tr  height="20">

<td width="73">77</td>

<td width="223" align="left"><a href="###">77</a></td>

<td width=80>77</td>

<td width=100>77</td></tr>



<tr  height="20">

<td width="73">88</td>

<td width="223" align="left"><a href="###">88</a></td>

<td width=80>88</td>

<td width=100>88</td></tr>



<tr  height="20">

<td width="73">99</td>

<td width="223" align="left"><a href="###">99</a></td>

<td width=80>99</td>

<td width=100>99</td></tr>

</table>

</div>

<br>

<input id="first" type=button value="第一页" onclick="firstOrLast(0)">

<input id="back" type=button value="上一页" onclick="N(-1)">

<input id="next" type=button value="下一页" onclick="N(1)">

<input id="last" type=button value="最后一页" onclick="firstOrLast(1)">

<script language="javascript">

<!--

var pageSize=4,currentPageNum=1,totlePageNum

var obj,totleRows,totleCols

var rowHeigth = 20;

var obj=document.getElementById('tab1').rows;

onload=function(){

    

    totleRows=obj.length;

	totleCols=document.getElementById('tab1').rows(0).cells.length; 

    totlePageNum=Math.ceil((totleRows-1)/pageSize)

	//如果某一页行数小于pageSize，则增加空行

	if(totleRows==0 || (totleRows-1)%pageSize != 0){

		var tempCols

		if(totleRows==0)

			tempCols = totleCols;

		else tempCols = pageSize-(totleRows-1)%pageSize;

		for(i=0;i<tempCols;i++){

			var newBlankRow = document.getElementById('tab1').insertRow();

			var point = newBlankRow.rowIndex;

			for (m=0; m < totleCols; m++) {

                obj[point].insertCell();

                obj[point].cells(m).innerHTML = " ";

			}

		}

	totleRows = document.getElementById('tab1').rows.length;

	}



    N(0)

}

function resetStyle(){

    for (var i=1;i<totleRows;i++)obj[i].style.display="none"

}

function N(k){

    if (k>0 && currentPageNum>=totlePageNum ||k<0 && currentPageNum<=1)return;

    currentPageNum+=k;

    resetStyle();

    toPage(currentPageNum);

	filter(currentPageNum);

}

function firstOrLast(flag){

	if(flag==0)

		currentPageNum = 1;

	else if(flag==1)

		currentPageNum = totlePageNum;

	else

		return ;

	resetStyle();

	toPage(currentPageNum);

	filter(currentPageNum);



}





function toPage(currentPageNum){

	 for (var i=(currentPageNum-1)*pageSize+1;i<=currentPageNum*pageSize;i++)

		obj[i].style.display="";

}



function filter(currentPageNum){

		//如果是第一页，则“上一页”不可用

	if(currentPageNum-1<1) {

		document.getElementById("back").disabled=true;

		document.getElementById("first").disabled=true;

	}

	else{

		document.getElementById("back").disabled=false;

		document.getElementById("first").disabled=false;

	}

	//如果是最后一页，则"下一页"不可用

	if(currentPageNum+1>totlePageNum ) {

		document.getElementById("next").disabled=true;

		document.getElementById("last").disabled=true;

	}

	else{

		document.getElementById("next").disabled=false;

		document.getElementById("last").disabled=false;

	}

}

//-->

</script>



</body>



</html>