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+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
模拟select的代码
Oct 19 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
js实现两点之间画线的方法
May 12 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
详解JavaScript类型判断的四种方法
Oct 21 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
第一节--面向对象编程
2006/11/16 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php 猴子摘桃的算法
2017/06/20 PHP
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python 解析xml文件的示例
2020/09/29 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
Python中如何定义一个函数
2016/09/06 面试题
生产总经理岗位职责
2013/12/19 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
党支部特色活动方案
2014/08/20 职场文书
免职通知
2015/04/23 职场文书
远程教育学习心得体会
2016/01/23 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
python实现简单聊天功能
2021/07/07 Python
分享3个非常实用的 Python 模块
2022/03/03 Python