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 相关文章推荐
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
JS实现网页时钟特效
Mar 25 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
Javascript开发包大全整理
2006/12/22 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
javascript常用函数(1)
2015/11/04 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
vue el-table实现自定义表头
2019/12/11 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
工作表扬信
2015/01/17 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers