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

前言

本文主要介绍的是利用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>