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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
用javascript实现倒计时效果
Feb 09 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部分常见问题总结
2008/03/27 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
python使用opencv进行人脸识别
2017/04/07 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python常用函数与用法示例
2019/07/02 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
公司道歉信范文
2014/01/09 职场文书
装修协议书范本
2014/04/21 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
中秋节主题班会
2015/08/14 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
导游词之西安骊山
2019/12/20 职场文书