简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

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

王林
リリース： 2023-05-28 12:17:38
オリジナル
903 人が閲覧しました

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

1. テーブルの準備

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

＃＃＃名前＃＃＃ ＃＃＃電話＃＃＃ ＃＃＃Eメール＃＃＃ 1234567890zhangsan@example.comlisi@example.comwangwu@example.com次に、テーブルの外観と動作を Web サイトやアプリケーションと同じにするために、いくつかの CSS スタイルを追加する必要があります。次のスタイルを出発点として使用し、必要に応じて変更できます。
张三
李四 0987654321
王五 4567891230
CSS スタイルの追加
    table {
  1. width: 100%;
    2. 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');
  1. var $ th = $thead.find('th');

テーブル本体の取得


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

var $tbody = $table.find('tbody');
    $tbody.css('display', 'block');
  1. $ tbody.css('height', '300px');
    2. $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();
    1. $new_tr.append($clone) );
      2. });

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



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

    $new_table.insertBefore($table);
    1. Fixed table header

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

    $(window).scroll(function() {
      varscroll_top = $(this).scrollTop();
    1. var table_top = $ table.offset().top;
      2. 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 サイトの他の関連記事を参照してください。

    ソース：php.cn
    前の記事：jqueryは画像効果を変更します 次の記事：Nodejsの置き換え
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
    から 2024-04-29 11:01:01
    0
    2
    1627
    Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
    から 2024-04-23 00:22:19
    0
    10
    1783
    子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
    から 2024-04-19 15:37:47
    0
    1
    1518
    親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
    から 2024-04-18 23:52:34
    0
    1
    1430
    CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
    から 2024-04-16 10:10:18
    0
    0
    1476
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！