jQuery は、Web ページの動的な操作を容易にする、広く使用されている JavaScript ライブラリです。テーブルは、多くの Web アプリケーションで共通のコンポーネントです。ただし、表が長すぎる場合、ユーザーはコンテンツを表示するためにスクロールする必要があり、ヘッダーが画面の上部から消えてしまいます。テーブルを使いやすくするには、jQuery を使用してヘッダーを画面の上部に固定し、ヘッダーが常に表示されるようにします。今回はjQueryを使ってヘッダーを修正する方法を紹介します。
1. テーブルの準備
まず、テーブルを含む HTML ドキュメントを準備する必要があります。簡単なフォームの例を次に示します:
＃＃＃名前＃＃＃
＃＃＃電話＃＃＃
＃＃＃Eメール＃＃＃
|
|
|
张三 |
1234567890
zhangsan@example.com
|
|
李四 |
0987654321 |
lisi@example.com
|
|
王五 |
4567891230 |
wangwu@example.com
|
|
|
CSS スタイルの追加 |
次に、テーブルの外観と動作を Web サイトやアプリケーションと同じにするために、いくつかの CSS スタイルを追加する必要があります。次のスタイルを出発点として使用し、必要に応じて変更できます。
table {- 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');- var $ th = $thead.find('th');
テーブル本体の取得
次に、テーブル本体への参照を取得する必要があります。テーブル ヘッダーとテーブル本体の位置を揃えるためには、テーブル本体をスクロール可能にし、ブロック レベルの要素として表示する必要があります。次のコードを使用してテーブル本体を取得できます:
var $tbody = $table.find('tbody');
$tbody.css('display', 'block');- $ tbody.css('height', '300px');
$tbody.css('overflow-y', 'scroll');
新しいテーブルを作成する
次に、前に取得したヘッダーと本文を含む新しいテーブルを作成する必要があります。次のコードを使用して、新しいテーブルを作成できます:
var $new_table = $('
');var $new_thead = $('');- $ new_table.append($new_thead);
var $new_tr = $('');$new_thead.append($new_tr);
ヘッダー ユニット セル
次に、テーブル ヘッダーの各セルをコピーし、新しいテーブルの最初の行に追加する必要があります。次のコードを使用してこれを行うことができます:
$th.each(function() { var $clone = $(this).clone();- $new_tr.append($clone) );
});
新しいテーブルを DOM に挿入
最後に、新しいテーブルを DOM の元のテーブルの前に挿入する必要があります。次のコードを使用してこれを行うことができます:
$new_table.insertBefore($table);
- Fixed table header
これで、Create が作成されました。固定ヘッダーを持つ新しいテーブルを作成し、DOM に挿入します。ただし、ユーザーが画面をスクロールすると、ヘッダーはスクロールして見えなくなります。ヘッダーを固定するには、スクロール イベントの発生時にスクロール オフセットに基づいてヘッダーの位置を調整します。この機能を実現するには、次のコードを使用できます: $(window).scroll(function() { varscroll_top = $(this).scrollTop();- 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 サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
React和解アルゴリズムはどのように機能しますか？
Mar 18, 2025 pm 01:58 PM
この記事では、Virtual DOMツリーを比較してDOMを効率的に更新するReactの調整アルゴリズムについて説明します。パフォーマンスの利点、最適化技術、ユーザーエクスペリエンスへの影響について説明します。
JavaScriptでカリーはどのように機能し、その利点は何ですか？
Mar 18, 2025 pm 01:45 PM
この記事では、JavaScriptのカレーについて説明します。これは、マルチアーグメント関数を単一argument関数シーケンスに変換する手法です。 Curryingの実装、部分的なアプリケーションなどの利点、実用的な用途、コード読み取りの強化を調査します
イベントハンドラーのデフォルトの動作をどのように防止しますか？
Mar 19, 2025 pm 04:10 PM
記事では、PreventDefault（）メソッドを使用して、イベントハンドラーのデフォルト動作の防止、ユーザーエクスペリエンスの強化などの利点、およびアクセシビリティの懸念などの潜在的な問題について説明します。
See all articles
