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根据时间生成m位随机数最大13位
Oct 30 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 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
discuz安全提问算法
2007/06/06 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
js no-repeat写法 背景不重复
2009/03/18 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
如何使用angularJs
2017/05/08 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
PHP7新特性简述
2017/06/11 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
python如何对实例属性进行类型检查
2018/03/20 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
Python 日期与时间转换的方法
2020/08/01 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
意大利在线药房:Saninforma
2021/02/11 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书