微客导航 » 文章资讯 » 利用jQuery实现一个简单的表格上下翻页效果

利用jQuery实现一个简单的表格上下翻页效果

2024-02-27 14:53:04 251

前言

本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果，注：实现原理与轮播图相似。下面话不多说，来看看详细的实现方法吧。

html:



日期参与团购场次团购结果当前状态

02.08第一场成功现金券已发放 02.09第二场失败G币已退回 02.10第三场团购中团购中 02.11第一场成功现金券已发放 02.12第二场成功现金券已发放 02.13第二场成功现金券已发放 02.14第二场成功现金券已发放 02.15第二场成功现金券已发放 02.16第二场成功现金券已发放 02.17第二场成功现金券已发放 02.18第二场成功G币已退回 02.19第二场成功现金券已发放 02.20第二场成功现金券已发放 02.21第二场成功团购中 02.22第二场成功现金券已发放 02.23第二场成功现金券已发放 02.24第二场成功G币已退回 02.25第二场成功现金券已发放上一页下一页

css:

.day02-popup04{
width:708px;
height:404px;}
.day02-popup04.group-caption{
width:594px;
margin:30pxauto0;
border-top:1pxsolid#ccc;
border-left:1pxsolid#ccc;
border-bottom:1pxsolid#ccc;}
.day02-popup04.group-captionspan{
width:147.5px;
display:inline-block;
border-right:1pxsolid#ccc;
text-align:center;
height:50px;
line-height:50px;
font-weight:600;
font-size:20px;}
.day02-popup04.group-buying-table{
position:relative;
width:594px;
margin:0auto;
height:255px;
overflow:hidden;
border-collapse:collapse;}
.day02-popup04.group-buying-tabletbody{
position:absolute;
top:0;}
.day02-popup04.group-buying-tabletbodytr{
height:50px;
line-height:50px;}
.day02-popup04.group-buying-tabletbodytrtd{
width:147px;
border-left:1pxsolid#ccc;
border-right:1pxsolid#ccc;
border-bottom:1pxsolid#ccc;
text-align:center;
font-size:18px;
color:#666;}
.day02-popup04.popup-page-btn{
position:absolute;
width:100%;
bottom:0;
height:66px;
line-height:66px;}
.day02-popup04.popup-page-btna{
display:inline-block;
text-align:center;
width:142px;
margin:012px;
height:42px;
line-height:42px;
font-size:20px;
color:#fff;
background-color:#bf3737;}

js代码：

vari=5,//每页显示的行数
len=$groupTable.find('tbodytr').length,//总行数
page=1,//起始页
maxPage=Math.ceil(len/i),//总页数
$tbody=$groupTable.find('tbody'),//容器
$scrollHeight=$groupTable.height();//滚动距离
//下翻按钮
$(".next").click(function(e){
if(!$tbody.is(":animated")){
if(page==maxPage){
$tbody.stop();
}else{
$tbody.animate({top:"-="+$scrollHeight+"px"},800);
page++;
}
}
});
//上翻按钮
$(".prev").click(function(){
if(!$tbody.is(":animated")){
if(page==1){
$tbody.stop();
}else{
$tbody.animate({top:"+="+$scrollHeight+"px"},800);
page--;
}
}
});

总结

以上就是利用利用jQuery实现一个表格的简单上下翻页的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

返回顶部
3162201930
czq8825@qq.com

利用jQuery实现一个简单的表格上下翻页效果

热门推荐

随机推荐