勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

   2024/01/13  jQuery JavaScript

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブルボディーをスクロールさせたい。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 JavaScript

  関連記事

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか？」「拡 ...

formでGET送信時に空のパラメータを送信しない方法(cleanQuery)

フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...

AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...