快捷導(dǎo)航

jquery 表格分頁等操作實(shí)現(xiàn)代碼(pagedown，pageup)

更新時(shí)間：2010年04月11日 19:21:35 作者：

jquery實(shí)現(xiàn)支持pagedown，pageup對(duì)表格進(jìn)行操作的實(shí)現(xiàn)代碼，需要的朋友可以參考下。

沒什么技術(shù)含量，先上圖：
思路：
1：獲取按鍵
2：判斷當(dāng)前表格行的位置

HTML結(jié)構(gòu)：

 
<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樣式：

復(fù)制代碼代碼如下:

 
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代碼：

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
$("#sure").click(function(){ 
var fval=$("#firstname").val(); 
var lval=$("#lastname").val(); 
var age=$("#age").val(); 
var percent=$("#percent").val(); 
//構(gòu)建表格 
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=""; 
}) 
//設(shè)定初始tr序號(hào) 
var logo=0; 
$(document).keydown(function(e){ 
var table=$("table tr"); 
//如果按下的是pagedown 
if(e.keyCode==40){ 
//移去所有的tr樣式 
$("tr.bak").removeClass("bak"); 
//為當(dāng)前所指向的tr加上高亮 
$("tr:eq("+logo+")").addClass("bak"); 
//tr序號(hào)加1 
logo++; 
} 
//如果tr序號(hào)超過了tr的長度，則返回第一行； 
if(logo>table.length){ 
logo=0; 
} 
//如果按下的是pageup 
if(e.keyCode==38){ 
//tr序號(hào)在當(dāng)前序號(hào)減一，就是上移一個(gè)位置 
var l=logo-1; 
//如果tr序號(hào)小于0，也就是此時(shí)的tr序號(hào)應(yīng)該在底部; 
if(l<0){ 
l=table.length+l;//重新計(jì)算tr序號(hào) 
} 
$("tr.bak").removeClass("bak"); 
$("tr:eq("+l+")").addClass("bak"); 
logo=l;//對(duì)logo進(jìn)行賦值，標(biāo)識(shí)當(dāng)前tr序號(hào) 
} 
}) 
}) 