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にて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
jQueryでページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法
ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベン ...
-
-
jQueryでimgタグのsrcを変える
やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...
-
-
JavaScriptで数値のカウントアップ及びカウントダウン
JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...