jquery 表格分頁(yè)等操作實(shí)現(xiàn)代碼(pagedown,pageup)
更新時(shí)間:2010年04月11日 19:21:35 作者:
jquery實(shí)現(xiàn)支持pagedown,pageup對(duì)表格進(jìn)行操作的實(shí)現(xiàn)代碼,需要的朋友可以參考下。
沒(méi)什么技術(shù)含量,先上圖:
思路:
1:獲取按鍵
2:判斷當(dāng)前表格行的位置
HTML結(jié)構(gòu):
復(fù)制代碼 代碼如下:
<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)超過(guò)了tr的長(zhǎng)度,則返回第一行;
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)
}
})
})
這里是jquery實(shí)現(xiàn)的表格分頁(yè)代碼,下面推薦幾款其它的表格分頁(yè)的實(shí)現(xiàn)方法:
js表格分頁(yè)實(shí)現(xiàn)代碼
TinyTable javascript表格分頁(yè)及排序插件
您可能感興趣的文章:
- 基于Jquery實(shí)現(xiàn)表格動(dòng)態(tài)分頁(yè)實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的表格分頁(yè)實(shí)現(xiàn)代碼
- JQuery頁(yè)面的表格數(shù)據(jù)的增加與分頁(yè)的實(shí)現(xiàn)
- 擴(kuò)展jquery實(shí)現(xiàn)客戶端表格的分頁(yè)、排序功能代碼
- 基于jQuery實(shí)現(xiàn)的無(wú)刷新表格分頁(yè)實(shí)例
- 基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè)
- jQuery給表格添加分頁(yè)效果
- 利用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表格上下翻頁(yè)效果
相關(guān)文章
jQuery用noConflict代替$的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery用noConflict代替$的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04jquery 構(gòu)造函數(shù)在表單提交過(guò)程中修改數(shù)據(jù)
這篇文章主要介紹了jquery 構(gòu)造函數(shù)在表單提交過(guò)程中修改數(shù)據(jù)的方法,十分簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-05-05jQuery控制網(wǎng)頁(yè)打印指定區(qū)域的方法
這篇文章主要介紹了jQuery控制網(wǎng)頁(yè)打印指定區(qū)域的方法,涉及jQuery操作html元素的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04jQuery focus和blur事件的應(yīng)用詳解
本篇文章主要是對(duì)jQuery中focus和blur事件的應(yīng)用進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01jQuery實(shí)現(xiàn)合并/追加數(shù)組并去除重復(fù)項(xiàng)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)合并/追加數(shù)組并去除重復(fù)項(xiàng)的方法,可實(shí)現(xiàn)合并兩個(gè)數(shù)組并出去重復(fù)項(xiàng)的功能,涉及數(shù)組的遍歷、判斷、追加等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04