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>
関連記事
-
-
jQueryにてCookieを取り扱う「jquery-cookie」プラグインの利用方法
jQueryでcookieを簡単に取り扱える「jquery-cookie」プラグ ...
-
-
SortableJSを使ってデータの並べ替え&保存
あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
jQueryでコンテンツのスライド
jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...
-
-
jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...