tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)
2024/01/13
テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブルボディーをスクロールさせたい。jQuery decapitateというプラグインで実装できる模様。以下に実装方法をメモ。
ダウンロード先
https://github.com/claymation/jquery-decapitate
サンプル
https://taitan916.info/sample/decapitate/
ソース
<?php function makeRandStr($length) { $r_str = ''; $str = array_merge(range('a', 'z'), range('0', '9'), range('A', 'Z"')); for ($x = 0; $x < $length; $x++) { $r_str .= $str[rand(0, count($str)-1)]; } return $r_str; } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery-decapitate</title> <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="bootstrap-responsive.min.css" rel="stylesheet" type="text/css" /> <link href="jquery.decapitate.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <script src="jquery.min.js"></script> <script src="bootstrap-affix.js"></script> <script src="jquery.decapitate.js"></script> <script> $(document).ready(function() { $('table').decapitate(); }); </script> </head> <body> <table id="element-table" class="table table-bordered"> <thead> <tr> <th>seq</th> <th>str</th> <th>tag</th> </tr> </thead> <tbody> <?php for($i = 0; $i < 100; $i++){ ?> <tr> <td><?php echo $i;?></td> <td><?php echo makeRandStr(5);?></td> <td><?php echo ($i % 2 == 0) ? 'aaa': 'bbb';?></td> </tr> <?php } ?> </tbody> </table> </body> </html>
関連記事
-
-
Flashを用いずJavaScriptでコピー&カット機能を実装する方法
以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...
-
-
Ajaxでプラグイン無しのファイルアップロード方法
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...
-
-
Lightboxで画像拡大時に文字タイトルとリンクをつける
lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...
-
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
jQueryにて何らかの処理中にブラウザをロックする「Block UI」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたかっ ...