|
jquery实现支持pagedown，pageup对表格进行操作的实现代码，需要的朋友可以参考下。 没什么技术含量，先上图： <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>
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; }
$(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序号 } }) })
|
