jquery テーブルのページングとその他の操作の実装コード (pagedown、pageup)_jquery

技術的な内容はありません。図から始めましょう:
アイデア:
1: ボタンを取得します
2: 現在のテーブル行の位置を決定します

HTML 構造:

コードをコピー コードは次のとおりです:

名:
姓:
年齢:
パーセント: 🎜>

;input type="checkbox" name="checkbox1" />




スタイル:





コードをコピーします
コードは次のとおりです。

body{ font-family: "Microsoft Yahei" font; -size:12px; } table{ text-align:center; th{

border-bottom:1px 破線 #ccc ;

}
td{
高さ:30px;
border-bottom:1px 破線 #ccc;
.bak{
背景色: #ebebeb 🎜>}



js コード:





コードをコピー


コードは次のように:

$(document).ready(function(){ $("#sure").click(function(){ var fval=$("# firstname").val();
var lval=$("#lastname").val();

var age=$("#age").val() ; varpercent= $("#percent").val(); //テーブルを構築var str='

' ''; $("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
ロゴを追加します。 //tr シーケンス番号が tr の長さを超える場合は、最初の行を返します。
if(logo>table.length){
logo=0;
//ページアップがpressed
if(e.keyCode==38){
//tr シリアル番号は現在のシリアル番号から 1 つ減り、1 つ上の位置に移動します。
var l =logo-1;
//tr の通し番号が 0 未満の場合、つまりこの時点の tr の通し番号が一番下になるはずです。
if(ll=table.length l ;//リセット tr シーケンス番号を計算します
}
$("tr.bak").removeClass("bak");
$("tr:eq(" l ")").addClass( "bak");
logo=l;//現在の tr シリアル番号を識別するためのロゴを割り当てます
}
})
})


は次のとおりですjquery によって実装されたテーブル ページング コード。その他の推奨されるテーブル ページング実装メソッドをいくつか示します。

js テーブル ページング実装コード



TinyTable JavaScript テーブル ページングおよび並べ替えプラグイン

	ピーター	28				;/td> ;	33	25%		クラーク	18	44%
;td>' fval '	;' パーセント '