NxWorld

table周りで便利なスニペットやプラグイン

通常

Title 1 Title 2 Title 3 Title 4
Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3
Row 4 Row 4 Row 4 Row 4
Row 5 Row 5 Row 5 Row 5

ゼブラテーブル(CSS)

Title 1 Title 2 Title 3 Title 4
Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3
Row 4 Row 4 Row 4 Row 4
Row 5 Row 5 Row 5 Row 5

ゼブラテーブル(jQuery)

Title 1 Title 2 Title 3 Title 4
Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3
Row 4 Row 4 Row 4 Row 4
Row 5 Row 5 Row 5 Row 5

列にクラスを付加する

Title 1 Title 2 Title 3 Title 4
Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3
Row 4 Row 4 Row 4 Row 4
Row 5 Row 5 Row 5 Row 5

CSS3で特定の列を装飾する

Title 1 Title 2 Title 3 Title 4
Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3
Row 4 Row 4 Row 4 Row 4
Row 5 Row 5 Row 5 Row 5

マウスオーバーでセルの背景色を変更する(IE6非対応)

Title 1 Title 2 Title 3 Title 4
Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3
Row 4 Row 4 Row 4 Row 4
Row 5 Row 5 Row 5 Row 5

マウスオーバーでセルの背景色を変更する(IE6対応)

Title 1 Title 2 Title 3 Title 4
Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3
Row 4 Row 4 Row 4 Row 4
Row 5 Row 5 Row 5 Row 5

ユーザー側で行(セル)を削除できるようにする

Title 1 Title 2 Title 3 行の削除
Row 1 Row 1 Row 1 この行を削除する
Row 2 Row 2 Row 2 この行を削除する
Row 3 Row 3 Row 3 この行を削除する
Row 4 Row 4 Row 4 この行を削除する
Row 5 Row 5 Row 5 この行を削除する

行にリンクを設定する

Title 1 リンク先 アンカー
Row 1 この行は Google にリンクされています NxWorld
Row 2 この行は Yahoo! にリンクされています NxWorld
Row 3 この行は Apple にリンクされています NxWorld
Row 4 この行は Microsoft にリンクされています NxWorld
Row 5 この行は WordPress にリンクされています NxWorld

数値によって背景色を変更する

商品名 価格
商品A ¥1,980
商品B ¥5,000
商品C ¥7,000
商品D ¥12,980
商品E ¥30,000

簡単に見出しを固定できるjQueryプラグイン「freezeheader」

Title 1 Title 2 Title 3 Title 4
Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3
Row 4 Row 4 Row 4 Row 4
Row 5 Row 5 Row 5 Row 5
Row 6 Row 6 Row 6 Row 6
Row 7 Row 7 Row 7 Row 7
Row 8 Row 8 Row 8 Row 8
Row 9 Row 9 Row 9 Row 9
Row 10 Row 10 Row 10 Row 10
Row 11 Row 11 Row 11 Row 11
Row 12 Row 12 Row 12 Row 12
Row 13 Row 13 Row 13 Row 13
Row 14 Row 14 Row 14 Row 14
Row 15 Row 15 Row 15 Row 15
Row 16 Row 16 Row 16 Row 16
Row 17 Row 17 Row 17 Row 17
Row 18 Row 18 Row 18 Row 18
Row 19 Row 19 Row 19 Row 19
Row 20 Row 20 Row 20 Row 20