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 (十) jQueryUI常用功能实战
Feb 23 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
vue使用canvas实现移动端手写签名
Sep 22 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
python英语单词测试小程序代码实例
2019/09/09 Python
解决django FileFIELD的编码问题
2020/03/30 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
如何用Lucene索引数据库
2016/02/23 面试题
几个MySql的面试题
2013/04/22 面试题
小学生演讲稿
2014/01/12 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python