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>
関連記事
日付入力のテキストフォームにカレンダープラグインを導入
やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...
Lightboxで画像拡大時に文字タイトルとリンクをつける
lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...
jQueryで指定の行動をとった際に、クリックイベントを発火させる方法
あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
jQueryのtoggleに引数
社内のソースで、 $(".hoge").toggle(flg == 1? fal ...