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

  没什么技术含量,先上图:

  思路:

  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表格分页及排序插件