jquery 表格分页等操作实现代码(pagedown，pageup)

jquery 表格分页等操作实现代码(pagedown，pageup)_jquery

php中文网

发布： 2016-05-16 18:29:55

原创

1932人浏览过

没什么技术含量，先上图：
思路：
1：获取按键
2：判断当前表格行的位置
jquery 表格分页等操作实现代码(pagedown，pageup)_jquery
HTML结构：

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

205

查看详情

复制代码代码如下:

firstname:
lastname:
age:
percent:

Peter	Parker	28	20.9%
John	Hood	33	25%
Clark	Kent	18	44%

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=' '+' '+fval+''+''+lval+''+''+age+''+''+percent+' ';
$("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(ll=table.length+l;//重新计算tr序号
}
$("tr.bak").removeClass("bak");
$("tr:eq("+l+")").addClass("bak");
logo=l;//对logo进行赋值，标识当前tr序号
}
})
})

这里是jquery实现的表格分页代码，下面推荐几款其它的表格分页的实现方法：
js表格分页实现代码

TinyTable javascript表格分页及排序插件