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 相关文章推荐
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 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
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
小程序实现录音功能
2020/09/22 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
python实现的简单文本类游戏实例
2015/04/28 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
应聘美工求职信
2013/11/07 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
计划生育工作汇报
2014/10/28 职场文书
表扬信格式模板
2015/05/05 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
php去除deprecated的实例方法
2021/11/17 PHP
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers