ホームページ >ウェブフロントエンド >jsチュートリアル >jquery テーブルのページングとその他の操作の実装コード (pagedown、pageup)_jquery

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

WBOYオリジナル: 2016-05-16 18:29:551675ブラウズ

技術的な内容はありません。図から始めましょう:
アイデア:
1: ボタンを取得します
2: 現在のテーブル行の位置を決定します
jquery テーブルのページングとその他の操作の実装コード (pagedown、pageup)_jquery
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 テーブル ページングおよび並べ替えプラグイン

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jquery.AutoComplete.js 中国語改訂版(Firefox対応)_jquery次の記事：jquery.AutoComplete.js 中国語改訂版(Firefox対応)_jquery

続きを見る

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

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

関連記事