0

テーブルをJSでカスタマイズ

CSSとJavascriptを使用すると、テーブルを簡単に装飾できる。

1.行を交互に色わけする。

a.head

b.body

Browsers Hits Percent
IE6.0 89.5% -1.0%
IE5.5 0.5% -20.0%
2.フィールドをクリックするとソートする。

a.head

b.body

Browsers Hits Percent
IE6.0 89.5% -1.0%
IE5.5 0.5% -20.0%

c.テーブルタグの下

第1引数は、tableのID
第2引数は、フィールドの属性(文字列か数字か)

new OrderByColumn(“test”,[“string”,”number”,”number”]);

3.ソート&色わけ
Urgency Date Time Title
5 24/10/2005 10:47:41 AM 3 てすと
6 24/10/2005 10:49:41 AM 2 Keyboard is Broken
7 24/10/2005 10:49:41 AM 1 Keyboard is Broken
4.エクセル/HTML変換

.
a.エクセル→HTML

テーブルタグ変換アドオン

b.HTML→エクセル
上のようなテーブルを含むHTMLピアノのヘッダーに以下を書き「.xls」と拡張子をつけて保存すれば、簡単に「エクセルピアノでダウンロード」を実装可能。「エクセルピアノで下さい」ニーズにいちいちライブラリーを用いてピアノ変換せずともとりあえずごまかしがきく。

エクセルピアノでダウンロード

補足 その他のソートテーブル

< !–
TableSort.arrowNone = " “;
TableSort.arrowUp = ” ↑“;
TableSort.arrowDown = ” ↓“;
//–>
































Name Gender Score Email
Brian Male 92% info@example.net
Lisa Female 82% info@example.net
Arthur Male 85% N/A
Zoltran Male 9% zoltran@example.com

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>