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 相关文章推荐
jquery选择器需要注意的问题
Nov 26 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 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读取目录下所有文件的代码
2008/01/07 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
python基础教程之五种数据类型详解
2017/01/12 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python PO设计模式的具体使用
2019/08/16 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
django实现后台显示媒体文件
2020/04/07 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
python map比for循环快在哪
2020/09/21 Python
Python内置函数及功能简介汇总
2020/10/13 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
装修致歉信
2014/01/15 职场文书
销售个人求职信范文
2014/04/28 职场文书
道德之星事迹材料
2014/05/03 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
Java的Object类的九种方法
2022/04/13 Java/Android