jQueryテーブルスクロール 縦横ヘッダ固定

アイキャッチ画像 jQuery

ヘッダを固定縦横スクロールさせるテーブルを
一から作ると意外と苦戦しますよね
コピペでいつでも作れるようにサンプルを残します

こんな感じで動くよ

テーブルのスクロール

サンプルソース

ポイント
  • ヘッダとデータでtableを分けている
  • JavaScriptスクロール位置の同期化
  • Class属性を追加することで動作可能

Class属性一覧
ヘッダ用のテーブルを囲むdiv div-head
ヘッダ用のテーブル tbl-head
データ用のテーブルを囲むdivタグ div-data
データ用のテーブル tbl-data
プログラム解説

initScroll関数でデータ部の横スクロールイベント発生時に
ヘッダ部の横スクロール位置を同期

initTable関数でデータ部のテーブルへ1行づつHTMLを組み込んで
テーブルを作成

実行結果の確認

デモページで、実際の動きを確認できます

初心者向けおすすめ書籍をご紹介!

jQueryの基本的なところから学びたい人向け
プログラミングを学んだけど、実際Webシステムで
どうやって開発するの?という方向けの書籍です
Kindle Unlimitedなら無料で読めます
初回登録、30日間無料!
Kindle Unlimitedを30日間無料体験する

未経験からエンジニアへ転職しよう!

プログラマー・ITエンジニア等の人材は、不足しています

プログラマの単価(1月の金額)は60~80万円が相場です

スマホの普及、IoT社会の発展によりプログラマの需要は今後も高いでしょう

未経験からでもプログラマーへの転職を目指すのは大いにありです

転職活動自体は、リスクゼロなので、まずは転職サイトに登録して

どんな転職先があるのか調べていくことを進めていくことをおすすめします

おすすめの転職サイト
マイナビジョブ20's

マイナビジョブ20's

マイナビジョブ20’sは、20代の転職を専門とする転職エージェントです

精通したキャリアアドバイザーから、最適な会社を提案してもらえます

カウンセリング、書類添削等就職活動を手厚くサポート!

20代・第二新卒・既卒の転職ならマイナビジョブ20's!!
・20代の転職を専門とする転職エージェント
・転職活動をしっかりサポート
・サービス利用料は¥0

コメント

タイトルとURLをコピーしました