jQueryでヘッダーを修正する方法-フロントエンドQ&A-php.cn

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

1. テーブルの準備

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

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

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

width: 100%;

}

th , td {

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

th {
背景-color: #f2f2f2;
}

tbody {

高さ: 300px;

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

# #ヘッダーの取得

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

var $table = $('table');

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

テーブル本体の取得

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

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

$ tbody.css('height', '300px');

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

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

var $new_table = $('');

var $new_thead = $('');

$ new_table.append($new_thead);

var $new_tr = $('');$new_thead.append($new_tr);

ヘッダーユニットセル

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

$th.each(function() {

$new_tr.append($clone) );

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

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

$new_table.insertBefore($table);

Fixed table header

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

$(window).scroll(function() {

var table_top = $ table.offset().top;

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

ログイン後にコピー

} else {

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

ログイン後にコピー

}
});

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

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

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

ソース：php.cn

前の記事：jqueryは画像効果を変更します次の記事：Nodejsの置き換え

このウェブサイトの声明

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

著者別の最新記事

未来を創る: まったくの初心者のための Java プログラミング

2024-10-13 13:32:21
あなたは一人ではありません: サポート力のあるコミュニティとともに Python をマスターしましょう

2024-10-12 11:58:51
初心者からプログラマーまで: Python プログラミングの力を活用する

2024-10-11 20:06:51
プログラマーのように考える: Java の基礎を学ぶ

2024-10-11 18:59:31
Java をシンプルに: プログラミング能力を高める初心者向けガイド

2024-10-11 18:30:51
PHP でブログを構築する: 初心者に優しいプロジェクト

2024-10-11 15:51:51
システムの言語を話す: C を一度に 1 行ずつ学習

2024-10-11 15:42:10
C のデータ構造とアルゴリズム: 初心者に優しいアプローチ

2024-10-11 14:41:20
涙のないコーディング: 簡単な方法で C を学ぶ

2024-10-11 14:08:31
Java によるデータ分析: 情報処理の初心者ガイド

2024-10-11 13:42:21