<< Prev Page Next Page >>

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


jQueryイディオム:テーブルの行クリックでチェックボックスにチェック入れる

行ごとクリッカブルにするというのをもう少し改善?してみました。全然知らない人にツッコミいれてすみません。はてブで新着に出てたのでつい。

jQueryでテーブルの行ごとクリックして チェックボックスにチェック出来るよう にするTipsです。ユーザーがデータを 見ながらフォームを送信する際に、分か りやすくしてあげよう、という目的です。 行ごとクリッカブルにする、みたいな感じ。 jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにする - かちびと. net
Chrome Google提供の高速ブラウザ。エクステンション豊富。 ★★★★★
Firefox 人気の火狐。アドオンが魅力的過ぎ ★★★★★
Safari Mac標準。iPhoneの登場でシェアは伸びるのか? ★★★★☆
Opera 目立たないけど実は高性能。もうちょい人気出てもいい ★★★★☆

改善点は以下です。

  • 「find()」メソッドと「:checkbox」セレクタ便利
  • 「hover(over,out)」メソッド便利
  • チェックボックスをクリックしてもちゃんと選択できるよ
  • どうせなので選択状態を行全体の色で表現

こういうスクリプトと

$(function() {
  $('.data tr').hover(function() {
    $(this).addClass('hover_tr');
  }, function() {
    $(this).removeClass('hover_tr');
  }).click(function(evt) {
    var $t = $(this);
    var chk = $t.find(':checkbox')[0];
    if (evt.target != chk) {
      chk.checked = !chk.checked;
    }
    if (chk.checked) {
      $t.addClass('checked_tr');
    } else {
      $t.removeClass('checked_tr');
    }
  });
});

こういうスタイルシートで実現しています。

.main_txt .data {
  border-collapse: collapse;
}
.main_txt .data td {
  border:1px solid black;
  padding: 4px 10px;
}
.main_txt .data .hover_tr td {
  background-color: #f0f0f0;
  color: #333;
}
.main_txt .data .checked_tr td {
  background-color: #0033aa;
  color: white;
  border:1px solid white;
}

いじょ!


この記事に対するコメント

この記事に対するコメントの投稿



管理者にだけ表示を許可する

この記事に対するトラックバック

トラックバックURL
http://tockri.blog78.fc2.com/tb.php/254-ad5edd59
この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。