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


Posted in Javascript onApril 11, 2010

没什么技术含量,先上图:
思路:
1:获取按键
2:判断当前表格行的位置
jquery 表格分页等操作实现代码(pagedown,pageup)
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表格分页及排序插件

Javascript 相关文章推荐
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
JS原型链怎么理解
Jun 27 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
javascript中的this作用域详解
Jul 15 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 #Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 #Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 #Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 #Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 #Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 #Javascript
JSON 教程 json入门学习笔记
Sep 22 #Javascript
You might like
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
JS中style属性
2006/10/11 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
django-初始配置(纯手写)详解
2019/07/30 Python
opencv实现简单人脸识别
2021/02/19 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
会计实习生工作总结的自我评价
2013/10/07 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang