ウェブデザイナーの日記

先日、TraversingのアレコレをNettuts+に教わりましたんで、その応用練習ってことで、よくあるテーブルのデザインのサンプルをつくってみました。こういうの↓

http://1-pixel.com/sample/jquery-table/sample.html

cssはhtml内に書かれています。よくあるヤツです。jsはコレです↓

$(function(){
  table();
});

function table(){
  $('tr', '#sample-table')
  .hover(
    function(){
      $(this).addClass('tr-selected');
    },
    function(){
      if(!$('input[type="checkbox"]', this).attr('checked')){
        $(this).removeClass('tr-selected');
      }
    }
  );
  $('tr:odd', '#sample-table')
  .addClass('tr-odd');
  $('#chkAll')
  .toggle(
    function(){
      $('input[type="checkbox"]', '#sample-table')
      .attr('checked', true);
      $(this)
      .html('Uncheck All');
      $('tr', '#sample-table')
      .addClass('tr-selected');        
    },
    function(){
      $('input[type="checkbox"]', '#sample-table')
      .attr('checked', false);
      $(this)
      .html('Check All');
      $('tr', '#sample-table')
      .removeClass('tr-selected');        
    }
  );
  $('tr', '#sample-table')
  .children('td:nth-child(1)')
  .nextAll()
  .click(
    function(){
      var _e = $('input[type="checkbox"][name^="chk"]', $(this).parent().children('td:first'));
      if(_e.attr('checked')){
        _e.attr('checked', false);
        $(this).parent().removeClass('tr-selected');
      }else{
        _e.attr('checked', true);
        $(this).parent().addClass('tr-selected');
      }
    }
  );
}

テーブルの行をクリックするとチェックボックスがONになり、選択されていることがわかりやすいように背景色が変わります。サンプルではiTuneぽいアイコンがチェックボックスの隣にありますが、これはなにかのイベントを呼ぶもんなので、このぶぶんだけ、つまり一番左のtdだけはチェックボックスON/OFFトグルのクリッカブル領域から外したい。<tr>〜</tr>をまとめてどーこーしたいのなら$('tr')でいいわけですが、これは少しむずかしい。

<tr>〜</tr>の中に複数個ある<td>〜</td>の中の、2番目から最後までのtdを複数選択する

としたい。このためにコレ↓

$('tr', '#sample-table').children('td:nth-child(1)').nextAll()

さらにこれらのtdに対してクリックイベントを割り当てます。こんどはtdからみて、チェックボックスを選択するためにコレ↓

$('input[type="checkbox"][name^="chk"]', $(this).parent().children('td:first'))

このthisは、1つのtrにつき5個づつあるtdの中の、2番目以降のどれかです。つまりこのセレクタの意味するところはこうなる↓

「このtdの親要素（つまりtr）の子供たちの中の、1番目のtdの中にある、name属性がchkで始まる、checkboxのinput要素」

てわけです。さいきんこういうのも少しづつ馴れてきました。冗長なかしょがありましたらツッコミよろしく。

『Javascript』カテゴリのエントリ

• jQuery :: 画像のリロード
• Javascript :: ecl.jsにながらくお世話になりました
• jQuery :: ネストしたリスト + ui.sortable.js
• jQuery :: event delegationてナニ？
• jQuery :: safariとappend関連メモ
• jQuery :: セレクタを使いこなす10のTraversing機能
• jQuery Tips 20選
• jQuery + SimpleModalを使った超シンプルなLightbox系スクリプト 4KB
• Javascript :: いろんな書き方のパス文字列をurl文字列に変換/統一する関数

コメント・プリーズ！

お名前 (your name)

(required)

url

(optional) ※公開されます。

メールアドレス (email)

(optional) ※公開されません。管理者にだけわかります。

コメント (comment)

(required)

 クッキーにお名前、url、メールアドレスを保存する。

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『&lt;』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

ADD YOUR COMMENT! / コメントする