ピボットテーブルを表示するjQueryプラグイン
Excelにはピボットテーブルという機能があります。クロス集計と呼ぶ人もいます。
これをHTMLのテーブルで再現するjQueryプラグイン「jquery.pivot.js」を作りました。
使い方
- プラグイン(jquery.pivot.js)をダウンロードします。
- HTMLを書きます。後述のサンプルを参考にしてください。
- 元となるテーブルを書きます。idを設定します。1行目は見出しです。合計欄はセットしません。
- ピボットテーブルを表示する箇所を「<div id="gokei"></div>」のように書きます。
- スクリプトを書きます。「$(表示先のid).pivot(対象テーブルのid,行ラベル(左側),列ラベル(上側),値,区分);」のように書きます。
- 表示先のidは「#gokei」のように書きます。「#」を付けます。
- 対象テーブルのidは「mytable」のように書きます。「#」を付けません。
- 行ラベル、列ラベル、値は見出しの文字列をセットします。
- 区分は合計ならば「sum」、カウントならば「count」もしくは空文字列にします。
- これらを同じフォルダに保存します。
- ページを開くとピボットテーブルが表示されます。
サンプル
<table id="mytable">
<tr>
<th>日付</th>
<th>商品</th>
<th>支店</th>
<th>売上</th>
</tr>
<tr>
<td>1月1日</td>
<td>スキャナ</td>
<td>千葉</td>
<td>20000</td>
</tr>
<!--省略-->
</table>
<p>合計</p>
<div id="gokei"></div>
<p>個数</p>
<div id="kosu"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pivot.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function () {
$("#gokei").pivot("mytable", "商品", "支店", "売上", "sum");
$("#kosu").pivot("mytable", "商品", "支店", "売上", "count");
});
//-->
</script>
<tr>
<th>日付</th>
<th>商品</th>
<th>支店</th>
<th>売上</th>
</tr>
<tr>
<td>1月1日</td>
<td>スキャナ</td>
<td>千葉</td>
<td>20000</td>
</tr>
<!--省略-->
</table>
<p>合計</p>
<div id="gokei"></div>
<p>個数</p>
<div id="kosu"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pivot.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function () {
$("#gokei").pivot("mytable", "商品", "支店", "売上", "sum");
$("#kosu").pivot("mytable", "商品", "支店", "売上", "count");
});
//-->
</script>
[ 2013年2月19日 | カテゴリー: JavaScript | タグ: jQuery , テーブル , プラグイン ]
« jQueryでチェックボックスを操作 | コストコ広島の駐車料金は1時間3千円 »
コメントを残す