jquery操作フォーム実装コード(複数操作をパッケージ化)_jquery

650) this. style="max-width:90%" border="0"> 650) this. style="max-width:90%" border="0"> コードは非常に簡単です。添付ファイルにあるので、ダウンロードして直接実行できます。 コードをコピーします コードは次のとおりです。 $(function() { jQuery.fn.alternateRowColors = function () { //プラグインにします。フォーム $('tbody tr:odd', this).removeClass('even').addClass('odd'); //奇数行は 1 行おきに色を変更します。 row $('tbody tr:even', this ).removeClass('odd').addClass('even'); //偶数行は 1 行おきに色を変更します return this>}; $('table.myTable').each(function() { var $table = $(this); //jquery オブジェクトとしてのストレージ テーブル $table.alternateRowColors($table); //ソート時に代替行の色が変わります $('th', $table).each(function(column) { var findSortKey; if ($(this).is('.sort- alpha')) { //アルファベット順に並べ替えます findSortKey = function( $cell) { return $cell.find('sort-key').text().toUpperCase() '' $cell.text( ).toUpperCase(); }; } else if ($(this).is('.sort-numeric')) { //数値的に並べ替えます findSortKey = function($cell) { var key = parseFloat($cell.text().replace (/^[^d.]*/, '')); return isNaN(key) ? }; 🎜>} else if ($(this).is('.sort-date')) { //日付で並べ替えます findSortKey = function($cell) { return Date.parse('1 ' $ cell.text()); }; } if (findSortKey) { $(this).addClass('clickable').hover(function() { $(this). addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() { //逆ソートステータスステートメント var newDirection = 1 ; if ($(this).is(' .sorted-asc')) { newDirection = -1; } var rows = $table.find('tbody>tr' ).get(); //データ行を配列に変換します $.each(rows, function(index, row) { row.sortKey = findSortKey($(row).children('td'). eq(column)); }); rows.sort(function(a, b) { if (a.sortKey if (a .sortKey > b.sortKey) return newDirection return }); $.each(rows, function(index, row) { $table.children('tbody') ).append(row); row.sortKey = null $table.find('th').removeClass('sorted-desc'); '); var $sortHead = $table.find('th').filter(':nth-child(' (column 1) ')'); // 逆ソートを実装します (newDirection == 1) { $sortHead .addClass('sorted-asc'); } else { $sortHead.addClass('sorted-desc'); //インターレースカラー関数を呼び出します $table .alternateRowColors($table); //並べ替えられた列のスタイルを削除し、現在の列にスタイルを追加します $table.find('td' ).removeClass('sorted').filter(': nth-child(' (列 1) ')').addClass('sorted'); $table.trigger('repaginate'); }); } }); //ページング $('table.paginated' ).each(function() { var currentPage = 0; var numPerPage = 10; var $table = $(this); $table.bind('repaginate', function( ) { $table.find('tbody tr ').hide().slice(currentPage * numPerPage, (currentPage 1) * numPerPage).show(); var numRows = $table.find('tbody tr').length; var numPages = Math.ceil(numRows / numPerPage); var $pager = $(' '); for (var page = 0; page $(' ')。 text(ページ 1) .bind('click ', { newPage: page }, function(event) { currentPage =event.data['newPage']; $table.trigger('repaginate) '); $(this).addClass( 'active').siblings().removeClass('active'); }).appendTo($pager).addClass('clickable'); >} $pager.insertBefore($table) ; $table.trigger('repaginate'); $pager.find('span.page-number:first').addClass('active '); }); } ); パッケージのダウンロード アドレス

jquery操作フォーム実装コード(複数操作をパッケージ化)_jquery

関連記事