求一个用js做的表单分页

yitiao520025 2009-03-31 12:13:59
求一个用js做的表单分页,最好是有实例的
哪位好心人给我发邮箱 psun@126.com
不甚感激~!
...全文
140 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>


81,103

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧