勉強したことのメモ

webプログラマが勉強したことのメモ。

tableのヘッダーを残して表示(jquery-decapitate)

   

bootstrapはあまり使わないので切り離して使えるように
したいところ。

■ダウンロード先
https://github.com/claymation/jquery-decapitate

■サンプル
http://sample.taitan916.info/decapitate/

■ソース
<?
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>
<? for($i = 0; $i < 100; $i++): ?>
<tr>
<td><?=$i;?></td>
<td><?=makeRandStr(5);?></td>
<td><?=($i % 2 == 0) ? 'aaa': 'bbb';?></td>
</tr>
<? endfor; ?>
</tbody>
</table>
</body>
</html>

 - jQuery

  関連記事

jQueryプラグイン使用時の注意

最近lightboxが急に動かなくなったという不具合があり 調べたところけっこう ...

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

セレクトメニューにサジェスト機能をつける(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...

スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

Ajaxでボタンとテキストボックス操作

ボタンを押して「https://aaa/bbb/ajax.php」からの 返答を ...

画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法

amazon等のECサイトによくにあるアイテムの満足度を星マークかつ5段階で送信 ...