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>
関連記事
-
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
-
jQueryにて特定のIDが存在するかチェックし分岐処理する方法
jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
jQueryにてCookieを取り扱う「jquery-cookie」プラグインの利用方法
jQueryでcookieを簡単に取り扱える「jquery-cookie」プラグ ...