jquery表格分页等操作实现代码(pagedown,pageup)_jquery
时间:2021-07-01 10:21:17
帮助过:9人阅读
没什么技术含量,先上图:
思路:
1:获取按键
2:判断当前表格行的位置
HTML结构: 代码如下:
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(l<0){ l=table.length+l;//重新计算tr序号 } $("tr.bak").removeClass("bak"); $("tr:eq("+l+")").addClass("bak"); logo=l;//对logo进行赋值,标识当前tr序号 } }) }) 这里是jquery实现的表格分页代码,下面推荐几款其它的表格分页的实现方法:
js表格分页实现代码
TinyTable javascript表格分页及排序插件