基于HTML与CSS的简单表格分页实现
作者:页面旅途时间:2026-10-22 02:23:29浏览:506
本文介绍了一种利用HTML、CSS和JavaScript实现简单表格分页显示的方法。通过操作DOM元素,控制表格行的可见性,并结合简单的导航链接实现页码切换,适用于数据量较小的静态页面展示场景。
表格分页基础实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页</TITLE> <style> body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover { color: #006600; } </style> </HEAD> <BODY onLoad="showhiddenRecord(pagenum)"> <center> 共 6 页 当前第 <span id="number">1</span> 页 <span id="theFirstPage">第一页</span> <span id="thePrePage">上一页</span> <span id="theNextPage">下一页</span> <span id="theLastPage">最后一页</span> 转到第<select onChange="gotoPage(this.value)" name="goto"> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> </select>页 </center> <TABLE id="mytable" cellpadding=4 cellspacing=1 border=0 bgcolor=#999999 width=500 align=center> <TR bgcolor=#ffffff><TD>标题</TD></TR> <TR bgcolor=#ffffff><TD>1</TD></TR> <TR bgcolor=#ffffff><TD>2</TD></TR> <TR bgcolor=#ffffff><TD>3</TD></TR> <TR bgcolor=#ffffff><TD>4</TD></TR> <TR bgcolor=#ffffff><TD>5</TD></TR> <TR bgcolor=#ffffff><TD>6</TD></TR> <TR bgcolor=#ffffff><TD>7</TD></TR> <TR bgcolor=#ffffff><TD>8</TD></TR> <TR bgcolor=#ffffff><TD>9</TD></TR> <TR bgcolor=#ffffff><TD>10</TD></TR> <TR bgcolor=#ffffff><TD>11</TD></TR> <TR bgcolor=#ffffff><TD>12</TD></TR> <TR bgcolor=#ffffff><TD>13</TD></TR> <TR bgcolor=#ffffff><TD>14</TD></TR> <TR bgcolor=#ffffff><TD>15</TD></TR> <TR bgcolor=#ffffff><TD>16</TD></TR> <TR bgcolor=#ffffff><TD>17</TD></TR> <TR bgcolor=#ffffff><TD>18</TD></TR> <TR bgcolor=#ffffff><TD>19</TD></TR> <TR bgcolor=#ffffff><TD>20</TD></TR> <TR bgcolor=#ffffff><TD>21</TD></TR> <TR bgcolor=#ffffff><TD>22</TD></TR> <TR bgcolor=#ffffff><TD>23</TD></TR> <TR bgcolor=#ffffff><TD>24</TD></TR> </TABLE> </BODY> </HTML>注意:若代码中引入了外部JavaScript文件,必须在页面完全加载后执行相关脚本,因此引入外部JS后需要刷新页面以确保功能正常生效。
作者最新文章
JS监听滚动事件:回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比:轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么?前端开发中的作用与应用场景解析
2026-11-04 23:17:54
