前端之家收集整理的这篇文章主要介绍了
利用jQuery实现一个简单的表格上下翻页效果，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
前言
本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果，
注：
实现原理与轮播图相似。下面话不多说，来看看详细的
实现方法吧。
html:
日期参与团购场次当前状态
nofollow" rel="external nofollow" rel="external nofollow" class="popup-close J_close">
css:
404px; }
.day02-popup04 .group-caption {
width: 594px;
margin: 30px auto 0;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc; }
.day02-popup04 .group-caption span {
width: 147.5px;
display: inline-block;
border-right: 1px solid #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: 0 auto;
height: 255px;
overflow: hidden;
border-collapse: collapse; }
.day02-popup04 .group-buying-table tbody {
position: absolute;
top: 0; }
.day02-popup04 .group-buying-table tbody tr {
height: 50px;
line-height: 50px; }
.day02-popup04 .group-buying-table tbody tr td {
width: 147px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #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-btn a {
display: inline-block;
text-align: center;
width: 142px;
margin: 0 12px;
height: 42px;
line-height: 42px;
font-size: 20px;
color: #fff;
background-color: #bf3737; }
显示的行数
len=$groupTable.find('tbody tr').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实现一个表格的简单上下翻页的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/jquery/40711.html
