No technical content, first figure:
Ideas:
1: Get the key
2: Determine the position of the current table row
HTML structure:
Copy Code code as follows:
<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= "OK" 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 Style:
Copy Code code as follows:
body{
font-family: "Microsoft Ya Hei";
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 Code:
Copy Code code as follows:
$ (document). Ready (function () {
$ ("#sure"). Click (function () {
var fval=$ ("#firstname"). Val ();
var lval=$ ("#lastname"). Val ();
var age=$ ("#age"). Val ();
var percent=$ ("#percent"). Val ();
Building a table
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= "";
})
Set initial TR serial number
var logo=0;
$ (document). KeyDown (function (e) {
var table=$ ("Table tr");
If the PageDown is pressed,
if (e.keycode==40) {
Remove all TR styles
$ ("Tr.bak"). Removeclass ("bak");
Adds a highlight to the currently pointed TR
$ ("Tr:eq (" +logo+) "). AddClass (" bak ");
TR Serial number plus 1
logo++;
}
If the TR ordinal exceeds the length of TR, the first row is returned;
if (logo>table.length) {
logo=0;
}
If the pageup is pressed,
if (e.keycode==38) {
The TR ordinal is minus one in the current ordinal, which is to move up one position
var l=logo-1;
If the TR ordinal is less than 0, the TR number at this point should be at the bottom;
if (l<0) {
l=table.length+l;//the TR serial number
}
$ ("Tr.bak"). Removeclass ("bak");
$ ("Tr:eq (" +l+) "). AddClass (" bak ");
logo=l;//the logo to identify the current TR serial number
}
})
})
Here is the jquery implementation of the table pagination code, the following recommendations for several other forms of the implementation of page pagination:
JS form pagination Implementation code
tinytable JavaScript form paging and sorting plugins
