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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
python字符串的常用操作方法小结
2016/05/21 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
区域销售经理职责
2013/12/22 职场文书
迟到检讨书800字
2014/01/13 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
党性观念心得体会
2014/09/03 职场文书
党员个人总结自评
2015/02/14 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书