表を彩る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名を付与すれば完成です。
サンプル
| Header1 |
Header2 |
Header3 |
| Foot1 |
Foot2 |
Foot3 |
| 1 |
1 |
1 |
| 2 |
2 |
2 |
| 1 |
1 |
1 |
| 2 |
2 |
2 |
| 1 |
1 |
1 |
| 2 |
2 |
2 |
| 1 |
1 |
1 |
| 2 |
2 |
2 |
| 1 |
1 |
1 |
| 2 |
2 |
2 |
| 1 |
1 |
1 |
| 2 |
2 |
2 |
| 1 |
1 |
1 |
| 2 |
2 |
2 |
| 1 |
1 |
1 |
| 2 |
2 |
2 |
Javascriptサンプルページ一覧
skuare.net