表を彩るjavascript「jQuery Grid Plugin」

テーブルで作成した表は項目が多くなると見づらくなります。
また横幅が限られる環境では2行に渡ってしまったり、フォントサイズを小さくしなければいけません。
jQuery Grid Pluginは項目の幅をスライドできたり、行ごとの色をスタライプ状に変更したり、クリック／ダブルクリック時にも色を変化させられます。

使用方法
jQuery Grid Pluginからjquery.grid.core.jsをjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.grid.core.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
var t=$("#id名");
t.grid({
navigate:{
maintainSelection:false
},
scroll:{
width:"600", //横幅
height:"300", //高さ
colWidths:[200,200,200]　　//項目の幅
},
stripe:true, //ストライプ
columnResize:true //項目のスライド
});
});
</script>
またストライプの色やクリック時の色はCSSで指定します。
.selected{background-color:limegreen !important;}
.activated{background-color:tomato !important;}
.even {background-color:#efefef}
.odd {background-color:#cde}
#test thead tr {
background-color: #EBEADB !important;
border: 1px solid #CBC7B8 !important;
text-align: left !important;
font-weight: normal !important;
}
#test tfoot tr {
background-color: #EBEADB !important;
border: 1px solid #CBC7B8 !important;
text-align: left !important;
font-weight: normal !important;
}
#test{
border-left: 1px solid #CBC7B8;
border-right: 1px solid #CBC7B8;
}
最後にtableで作成した表にid名を付与すれば完成です。
表を彩るjavascript「jQuery Grid Plugin」サンプル

2007年12月13日

前の記事：スライドするパネルを作成するjavascript「jQuery Sliding Panels」
次の記事：Yahoo!アドパートナーテスト

関連記事

• [jQuery]scrollable HTML table
• [jQuery]tablesorter
• [jQuery]quickSearch
• [jQuery]Simple tableSorter
• [jQuery]graphTable

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」