沒什麼技術含量，先上圖：
思路：
1：獲取按鍵
2：判斷當前表格行的位置 
HTML結構：
代碼如下:
<div id="formdiv" align="center">
firstname:<input type="text" id="firstname"/>
lastname:<input type="text" id="lastname"/>
age:<input type="text" id="age"/>
percent:<input type="text" id="percent"/>
<input type="button" value="確定" id="sure"/>
</div>
<table border="0" cellpadding="0" cellspacing="0" align="center" width=600>
<tr>
<td><input type="checkbox" name="checkbox1"/><td>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>20.9%</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox1"/><td>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>25%</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox1"/><td>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>44%</td>
</tr>
</table>
style樣式：
代碼如下:
body{
font-family:"微軟雅黑";
font-size:12px;
}
table{
text-align:center;
}
th{
height:30px;
border-bottom:1px dashed #ccc;
}
td{
height:30px;
border-bottom:1px dashed #ccc;
}
.bak{
background-color:#ebebeb;
}
js代碼：
代碼如下:
$(document).ready(function(){
$("#sure").click(function(){
var fval=$("#firstname").val();
var lval=$("#lastname").val();
var age=$("#age").val();
var percent=$("#percent").val();
//構建表格
var str='<tr><td><input type="checkbox" name="checkbox"/><td>'+'<td>'+fval+'</td>'+'<td>'+lval+'</td>'+'<td>'+age+'</td>'+'<td>'+percent+'</td></tr>';
$("table").append(str);
str="";
})
//設定初始tr序號
var logo=0;
$(document).keydown(function(e){
var table=$("table tr");
//如果按下的是pagedown
if(e.keyCode==40){
//移去所有的tr樣式
$("tr.bak").removeClass("bak");
//為當前所指向的tr加上高亮
$("tr:eq("+logo+")").addClass("bak");
//tr序號加1
logo++;
}
//如果tr序號超過了tr的長度，則返回第一行；
if(logo>table.length){
logo=0;
}
//如果按下的是pageup
if(e.keyCode==38){
//tr序號在當前序號減一，就是上移一個位置
var l=logo-1;
//如果tr序號小於0，也就是此時的tr序號應該在底部;
if(l<0){
l=table.length+l;//重新計算tr序號
}
$("tr.bak").removeClass("bak");
$("tr:eq("+l+")").addClass("bak");
logo=l;//對logo進行賦值，標識當前tr序號
}
})
})
這裡是jquery實現的表格分頁代碼，下面推薦幾款其它的表格分頁的實現方法：
js表格分頁實現代碼
TinyTable javascript表格分頁及排序插件