Making a table become selectable with rbTable テーブルをちょっとだけ使いやすくしてくれるjQueryプラグイン「rbTable」。 テーブルのセル上にカーソルがあうと色が変わって、クリックすると更に選択状態にできるというjQueryプラグインです。 沢山のデータをたどる上で、こういった機能はとても便利ですが通常のテーブルにはありませんね。 ちょっとした一手間で使いやすいテーブルにできるので覚えておいもよいかも。 CSSなどは自分で指定してデザインすることが出来るので、自分で好きなようにデザインすることができるはずです。 初期化には次のように、CSSのクラスを指定してあげるだけです $('.table').rbTable({row:"your_class", rowClick:"your_click_class"}); 関連エントリ 超カッコいい
昔(テーブルレイアウトの時代)は、trやtd一つ一つにbackgroundで指定していました。CSSが普及してきてからはidまたはclassで指定したtrやtdにbackground-colorなどで色付けしています。 ただ問題は、各行にclassを付けて1行おきに背景色を変えるテーブルを作成します。そして、そのテーブルに新しい行を追加または削除すると、行の順番が変わるので色付け用のclassをまた付け直さなければなりません。かなり面倒ですよね。これから紹介するのは行を追加・削除しても1行おきに背景色が変わる方法です。メインはJavascriptになっちゃうんですけど、参考にしてみてください。 Javascriptを記述 //-------------値設定--------------- var classN = "zebra"; //クラス名を指定 var addClass1 = "
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル(クリックすればサンプルページに移動します) Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素(ここでは span)に position: absolute; を設定。 斜線(border)を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
今作成している案件で、結構ボリュームのある一覧表を載せるページがありまして…。 縦に長い表だと、視認性を上げるために1行おきに背景色を変更するなんてコトも常套手段となる訳です。 これまでは手作業で、tr要素にclass指定をして、CSSで背景色を変更したりしていたんですが、この方法だと表の途中で追加したり、削除したりという修正がとても手間…というか、ほとんどやり直しになってしまいます。 Javascriptを使えば、何か手軽な方法があるんだろうなぁとは思っていたモノの、なかなか必要に迫られずにサボっていました。 前置きが長くなりましたが、 調べた所、jQueryを使えばとても簡単だ!というコトが分かり、紹介してみます。 参考にしたのは、「sukechan.net」さんの「jQuery でテーブルの背景色を 1 行置きに変更する」というページです。 まず、jQueryから最新のスクリプトをダ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く