Jquery supports pagedown and pageup implements code for table operations. For more information, see. No technical skills. First:
Ideas:
1. Obtain buttons
2: determine the location of the row in the current table
HTML structure:
The Code is as follows:
Firstname:
Lastname:
Age:
Percent:
|
|
Peter |
Parker |
28 |
20.9% |
|
|
John |
Hood |
33 |
25% |
|
|
Clark |
Kent |
18 |
44% |
Style:
The 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:
The 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 =''+''+ Fval +''+''+ Lval +''+''+ Age +''+''+ Percent +'';
$ ("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