tableの表組みを一瞬で彩る!jQueryプラグイン「tablecloth.js」

表組みをtableで組むとちょっと華やかさにかけてしまいます。
そんな時はtablecloth.jsを利用し、カスタマイズしましょう。
tableの表組みを一瞬で彩る!jQueryプラグイン「tablecloth.js」サンプル

使用方法 tablecloth.jsからファイル一式をダウンロード。
なお、表組みは下記のようなものがあったとします。
<table> <thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>theme1</td>
<td>Strin1</td>
<td>theme1</td>
<td>
<p>Content1</p>
</td>
</tr>
<tr><!-- 以下項目分 --></tr>
</tbody>
</table>

あとはJavaScriptを記述するだけです。
<link rel="stylesheet" href="tablecloth2.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.tablecloth.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table").tablecloth({
theme: "dark", //'default', 'none', 'stats'
striped: true, //背景を交互につける
sortable: true //sortさせたい場合
});
});
</script>

tableの表組みを一瞬で彩る!jQueryプラグイン「tablecloth.js」サンプル

sponsors

「tableの表組みを一瞬で彩る!jQueryプラグイン「tablecloth.js」」をシェアする

記事作成:
記事URL:

TOP > > > tableの表組みを一瞬で彩る!jQueryプラグイン「tablecloth.js」