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

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

1. テーブルの準備

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

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

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

th {
背景-color: #f2f2f2;
}

tbody {

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

# #ヘッダーの取得


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

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

テーブル本体の取得

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

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

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

var $new_thead = $('

ヘッダー ユニット セル


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

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

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

7. Fixed table header

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 サイトの他の関連記事を参照してください。