直接上代码，复制出来就可以使用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>点标记</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function () { var $table = $('table'); var currentPage = 0;//当前页默认值为0 var pageSize = 5;//每一页显示的数目 $table.bind('paging', function () { $table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show(); }); var sumRows = $table.find('tbody tr').length; var sumPages = Math.ceil(sumRows / pageSize);//总页数 var $pager = $('<div class="page"></div>'); //新建div，放入a标签,显示底部分页码 for (var pageIndex = 0 ; pageIndex < sumPages ; pageIndex++) { $('<a href="#" id="pageStyle" onclick="changCss(this)"><span>' + (pageIndex + 1) + '</span></a>').bind("click", { "newPage": pageIndex }, function (event) { currentPage = event.data["newPage"]; $table.trigger("paging"); //触发分页函数 }).appendTo($pager); $pager.append(" "); } $pager.insertAfter($table); $table.trigger("paging"); //默认第一页的a标签效果 var $pagess = $('#pageStyle'); $pagess[0].style.backgroundColor = "#006B00"; $pagess[0].style.color = "#ffffff"; }); //a链接点击变色，再点其他回复原色 function changCss(obj) { var arr = document.getElementsByTagName("a"); for (var i = 0; i < arr.length; i++) { if (obj == arr[i]) { //当前页样式 obj.style.backgroundColor = "#006B00"; obj.style.color = "#ffffff"; } else { arr[i].style.color = ""; arr[i].style.backgroundColor = ""; } } } </script> <style type="text/css"> table { width: 600px; text-align: center; } table tr th, td { height: 30px; line-height: 30px; border: 1px solid #ccc; } #pageStyle { display: inline-block; width: 32px; height: 32px; border: 1px solid #CCC; line-height: 32px; text-align: center; color: #999; margin-top: 20px; text-decoration: none; } #pageStyle:hover { background-color: #CCC; } #pageStyle .active { background-color: #0CF; color: #ffffff; } </style> </head> <body> <table cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张飞</td> <td>男</td> </tr> <tr> <td>2</td> <td>刘备</td> <td>男</td> </tr> <tr> <td>3</td> <td>关羽</td> <td>男</td> </tr> <tr> <td>4</td> <td>妲己</td> <td>女</td> </tr> <tr> <td>5</td> <td>后羿</td> <td>男</td> </tr> <tr> <td>6</td> <td>大乔</td> <td>女</td> </tr> <tr> <td>7</td> <td>露娜</td> <td>女</td> </tr> <tr> <td>8</td> <td>E.Z</td> <td>男</td> </tr> <tr> <td>9</td> <td>琴女</td> <td>女</td> </tr> <tr> <td>10</td> <td>貂蝉</td> <td>女</td> </tr> </tbody> </table> </body> </html>