前言

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

html:

css:

.day02-popup04 {

width: 708px;

height: 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; }

js代码：

var i= 5, //每页显示的行数

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实现一个表格的简单上下翻页的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。