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 相关文章推荐
Javascript中的apply()方法浅析
Mar 15 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
vue实现放大镜效果
Sep 17 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_xmlhttp 乱码问题解决方法
2009/08/07 PHP
prototype 的说明 js类
2006/09/07 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python实现目录树生成示例
2014/03/28 Python
python中反射用法实例
2015/03/27 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python实现自动更换ip的方法
2015/05/05 Python
python中黄金分割法实现方法
2015/05/06 Python
python简单实现基数排序算法
2015/05/16 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python命令行参数用法实例分析
2019/06/25 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
个人能力自我鉴赏
2014/01/25 职场文书
产品设计开发计划书
2014/05/07 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
龙门石窟导游词
2015/02/02 职场文书
民事答辩状范本
2015/05/21 职场文书
历史博物馆观后感
2015/06/05 职场文书
初一数学教学反思
2016/02/17 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python