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的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 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设计模式 Template (模板模式)
2011/06/26 PHP
php控制文件下载速度的方法
2015/03/24 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
加载 Javascript 最佳实践
2011/10/30 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
基于python实现坦克大战游戏
2020/10/27 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
公司酒会主持词
2015/07/02 职场文书
校运会通讯稿
2015/07/18 职场文书
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS