前言

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

html:

<div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result">团购结果</span><span>当前状态</span> </div> <table class="group-buying-table J_group_buying_table"> <tr><td>02.08</td><td>第一场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.09</td><td>第二场</td><td>失败</td><td>G币已退回</td></tr> <tr><td>02.10</td><td>第三场</td><td>团购中</td><td>团购中</td></tr> <tr><td>02.11</td><td>第一场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.12</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.13</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.14</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.15</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.16</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.17</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.18</td><td>第二场</td><td>成功</td><td>G币已退回</td></tr> <tr><td>02.19</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.20</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.21</td><td>第二场</td><td>成功</td><td>团购中</td></tr> <tr><td>02.22</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.23</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> <tr><td>02.24</td><td>第二场</td><td>成功</td><td>G币已退回</td></tr> <tr><td>02.25</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr> </table> <p class="popup-page-btn"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prev">上一页</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="next">下一页</a> </p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="popup-close J_close"></a> </div>

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