Code for operations such as jquery table paging (pagedown, pageup)

No technical skills. First:
Ideas:
1. Obtain buttons
2: determine the location of the row in the current table

HTML structure:

Copy codeThe Code is 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:
Copy codeThe Code is as follows: 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 Code: Copy codeThe Code is as follows: $ (document). ready (function (){
$ ("# Sure"). click (function (){
Var fval = $ ("# firstname"). val ();
Var lval = $ ("# lastname"). val ();
Var age = $ ("# age"). val ();
Var percent = $ ("# percent"). val ();
// Create 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 the initial tr number
Var logo = 0;
$ (Document). keydown (function (e ){
Var table = $ ("table tr ");
// If you press pagedown
If (e. keyCode = 40 ){
// Remove all tr styles
$ ("Tr. bak"). removeClass ("bak ");
// Highlight the current tr
$ ("Tr: eq (" + logo + ")"). addClass ("bak ");
// Tr serial number plus 1
Logo ++;
}
// If the tr serial number exceeds the tr length, the first row is returned;
If (logo> table. length ){
Logo = 0;
}
// If pageup is pressed
If (e. keyCode = 38 ){
// Tr serial number minus one in the current serial number, that is, moving up a position
Var l = logo-1;
// If the tr serial number is smaller than 0, the tr serial number should be at the bottom;
If (l <0 ){
L = table. length + l; // recalculate the tr serial number
}
$ ("Tr. bak"). removeClass ("bak ");
$ ("Tr: eq (" + l + ")"). addClass ("bak ");
Logo = l; // assign a value to the logo to identify the current tr serial number
}
})
})

Here is the table paging Code implemented by jquery. We recommend several other implementation methods for table paging:
Js table paging implementation code

TinyTable javascript table paging and sorting plug-in