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 相关文章推荐
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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 日期时间处理函数小结
2009/12/18 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
VUE 使用中踩过的坑
2018/02/08 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python线性方程组求解运算示例
2018/01/17 Python
django用户登录和注销的实现方法
2018/07/16 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Python 一句话生成字母表的方法
2019/01/02 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Python读取yaml文件的详细教程
2020/07/21 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
新年主持词
2014/03/27 职场文书
服装设计师求职信
2014/06/04 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
2016年教师节慰问信
2015/12/01 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Python基础学习之奇异的GUI对话框
2021/05/27 Python