html表格翻页简单，利⽤jQuery实现⼀个简单的表格上下翻页效
果
前⾔
本⽂主要介绍的是利⽤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: 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, //起始页
il(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翻书效果});
总结
以上就是利⽤利⽤jQuery实现⼀个表格的简单上下翻页的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，如果有疑问⼤家可以留⾔交流，谢谢⼤家对脚本之家的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。