jQueryでヘッダーを修正する方法

jQuery は、Web ページの動的な操作を容易にする、広く使用されている JavaScript ライブラリです。テーブルは、多くの Web アプリケーションで共通のコンポーネントです。ただし、表が長すぎる場合、ユーザーはコンテンツを表示するためにスクロールする必要があり、ヘッダーが画面の上部から消えてしまいます。テーブルを使いやすくするには、jQuery を使用してヘッダーを画面の上部に固定し、ヘッダーが常に表示されるようにします。今回はjQueryを使ってヘッダーを修正する方法を紹介します。

1. テーブルの準備

まず、テーブルを含む HTML ドキュメントを準備する必要があります。簡単なフォームの例を次に示します:

＃＃＃名前＃＃＃ ＃＃＃電話＃＃＃ ＃＃＃Eメール＃＃＃ 1234567890zhangsan@example.comlisi@example.comwangwu@example.com次に、テーブルの外観と動作を Web サイトやアプリケーションと同じにするために、いくつかの CSS スタイルを追加する必要があります。次のスタイルを出発点として使用し、必要に応じて変更できます。

		张三
	李四	0987654321
	王五	4567891230
		CSS スタイルの追加

table {
2. width: 100%;
border-collapse: Collapse;

}

th , td {

パディング: 8px;
text-align: left;
border-bottom: 1px ソリッド #ddd;
}

th {
背景-color: #f2f2f2;
}

tbody {

高さ: 300px;

オーバーフロー -y: スクロール;
表示: ブロック;
}

# #ヘッダーの取得


ヘッダーを修正するには、まずヘッダーへの参照を取得する必要があります。次のコードを使用してテーブル ヘッダーを取得できます:

var $table = $('table');

var $thead = $table.find('thead');
3. var $ th = $thead.find('th');

テーブル本体の取得

次に、テーブル本体への参照を取得する必要があります。テーブル ヘッダーとテーブル本体の位置を揃えるためには、テーブル本体をスクロール可能にし、ブロック レベルの要素として表示する必要があります。次のコードを使用してテーブル本体を取得できます:

var $tbody = $table.find('tbody');

$tbody.css('display', 'block');
4. $ tbody.css('height', '300px');
$tbody.css('overflow-y', 'scroll');

新しいテーブルを作成する

次に、前に取得したヘッダーと本文を含む新しいテーブルを作成する必要があります。次のコードを使用して、新しいテーブルを作成できます:

var $new_table = $('f5d188ed2c074f8b944552db028f98a1');

var $new_thead = $('ae20bdd317918ca68efdc799512a9b39');
5. $ new_table.append($new_thead);
var $new_tr = $('a34de1251f0d9fe1e645927f19a896e8');

$new_thead.append($new_tr);

ヘッダー ユニット セル


次に、テーブル ヘッダーの各セルをコピーし、新しいテーブルの最初の行に追加する必要があります。次のコードを使用してこれを行うことができます:

$th.each(function() {

var $clone = $(this).clone();
6. $new_tr.append($clone) );
});

新しいテーブルを DOM に挿入

最後に、新しいテーブルを DOM の元のテーブルの前に挿入する必要があります。次のコードを使用してこれを行うことができます:

$new_table.insertBefore($table);

7. Fixed table header

これで、Create が作成されました。固定ヘッダーを持つ新しいテーブルを作成し、DOM に挿入します。ただし、ユーザーが画面をスクロールすると、ヘッダーはスクロールして見えなくなります。ヘッダーを固定するには、スクロール イベントの発生時にスクロール オフセットに基づいてヘッダーの位置を調整します。この機能を実現するには、次のコードを使用できます:

$(window).scroll(function() {

varscroll_top = $(this).scrollTop();
8. var table_top = $ table.offset().top;
if (scroll_top > table_top) {

$thead.css('position', 'fixed');
$thead.css('top', 0);

} else {

$thead.css('position', 'static');
$thead.css('top', '');

}
});

This code ウィンドウがスクロールされるとトリガーされ、スクロールのオフセットに基づいてヘッダーの位置を固定または静的に設定します。スクロール オフセットがテーブルの上部のオフセットより大きい場合は、ヘッダーを固定に設定します。それ以外の場合は、ヘッダーを静的に設定します。

この時点で、ヘッダーは正常に修正されました。ユーザーがスクロールすると、ヘッダーは画面の上部に残り、スクロールとともに移動します。この簡単なヒントを使用すると、Web アプリケーションの使いやすさとアクセシビリティを簡単に強化できます。

以上がjQueryでヘッダーを修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。