溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文主要介紹的是利用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實現一個表格的簡單上下翻頁的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
