Using jQuery to implement a simple table up and down

This paper mainly introduces the use of jQuery to implement a simple table up and down page, Note: The principle of implementation is similar to the boot map. Let’s take a look at the detailed implementation method.

HTML:

Date
  Participate in group purchase Current state 
02.08 First field
success 02.09 Failure failed G coin has been returned 02.10 Group 3 Group purchase 02.11 The second game success The second field success The cash coupon has been issued 02.15 The second game Success Cash coupons have been issued 02.16 The second field success Cash coupons have been issued 02.17 Success Cash coupons have been issued 02.18 success cash coupons have been issued Success 02.22 Second game Cash coupons have been issued The second game success 02.24 The second field success G coin has been returned 02.25 The second game success Cash coupons have been issued VAR i = 5, // The number of rows displayed per page LEN = $ groupTable.Find ('tbody tr'). Length, // Total number Page = 1, // start page mAXPage = Math.ceil (len / i), // Total page number $ TBODY = $ groupTable.Find ('tbody'), // Container $ scrollHeight = $ groupTable.Height (); // Rolling distance // down turn over Button $ (". Next"). Click (Function (e) {if (! $ Tbody.is (": animated")) {if (page == maxpage) {$ tbody.stop ();} else {$ Tbody.animate ({top: "- =" + $ SCROLLHEIGHT + "PX"}, 800); Page ++;}}}); // Turn the button $ (". prev"). click (function () {i (! $ tbody.is (": animated")) {if (page == 1) {$ tbody.stop ();} else {$ tbody.animate ({top: "+ =" + $ SCROLLHEIGHT + "PX "}, 800); page--;}}}; The above is to use jQuery to implement one The form of simple topping and down, I hope this paper will bring a certain help to everyone's learning or work. If you have any questions, you can leave a message, thank you for your support of Tumi Cloud.
Cash coupons have been issued 02.12
The second field
cash The coupon has been issued
No. 2
The cash coupon has been issued The second success
Next
.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;} .duc} .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 code:
Summary
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment