jquery 表格分页等操作实现代码(pagedown，pageup)

没什么技术含量，先上图：
思路：
1：获取按键
2：判断当前表格行的位置

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实现的表格分页代码，下面推荐几款其它的表格分页的实现方法：

附件：

http://download.csdn.net/detail/smshuxue/6812379

jquery 表格分页等操作实现代码(pagedown，pageup)相关推荐

JQuery表格分页
JQuery表格分页开发工具与技术:工具:Visual Studio,技术:JQuery 作者:刘胜撰写时间:2019-05-08 实现效果是跟幻灯片一样的,当前页CurPage = 1,分页刚显 ...
html中写jq,在jQuery中，能够操作HTML代码及其文本的方法是（）
包括瘫痪理治疗方的物脑性法不,中作法B法Cn法法Ed法上田. S评评分评分评分评分分4分B分C分D分E,够操评分轻度脑外伤G是(. 码及儿童目C目E表包项目项目项目括A症评孤独0个个项3个个项6个定量 ...
4、jquery表格操作
1.<html> 2.<head> 3.<title>jquery表格操作</title> 4.<script language="ja ...
基于jquery的无刷新表格分页
2019独角兽企业重金招聘Python工程师标准>>> 效果图 html结构 <table id="cs_table" class="datata ...
jquery.pagination 分页插件使用代码
jquery.pagination 分页插件下载链接 http://www.jq22.com/yanshi5697 js代码内容 var listLength = '' var pageNum = ...
Jquery 表格插件DataTables
[转]Jquery 表格插件DataTables 博客分类: Jquery jquerydatatablesjavascript 1.特性可变长度分页: 动态过滤: 多列排序,带数据类型检测功能: ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
Datatables——一款前端好用的表格插件,本地json模拟数据实现表格分页查询
在做管理后台功能时,经常需要用到表格展示数据,从数据库查询返回的数据,返回集合或数组到前台,然后前台将数据渲染成表格,方便直观展示数据,通常还需要结合分页.查询.排序.Datatables是一款符合上 ...
layui table 表格模板按钮的实例代码
文章转载:https://www.jb51.net/article/170530.htm 今天小编就为大家分享一篇layui table 表格模板按钮的实例代码,具有很好的参考价值,希望对大家有所帮助 ...

jquery 表格分页等操作实现代码(pagedown，pageup)

jquery 表格分页等操作实现代码(pagedown，pageup)

jquery 表格分页等操作实现代码(pagedown，pageup)相关推荐

最新文章

热门文章