[jQuery]checkboxのチェックが入った行の背景を変える

Read More

前回に続き今回もcheckbox絡み。


縦方向のth要素に配置されたcheckboxのチェックを入れるとその行の背景を変えるというもの。






以下に書いたコードは以前やった↓のコードを流用している。
[jQuery]tableのtdをクリックしてcheckboxにチェックを入れる方法
http://xirasaya.com/?m=detail&hid=434




■checkboxのチェックが入った行の背景を変える



■checkboxのチェックが入った行の背景を変えるサンプルコード
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
$(function() {
  // th row
  $('[id^="row_"]').click(function(event){
    event.stopPropagation();
    $auto_line_color();
  });
  $('[id^="row_"]').parent('th').click(function(event){
    $(this).children('[id^="row_"]').trigger('click');
  });
  $('label[for^="row_"]').click(function(event) {
    event.preventDefault();
  });

  var $auto_line_color = function() {
    // checked row list
    var $row_list = $('[id^="row_"]:checked');
    var $ary_row_index = [];
    $row_list.each(function() {
      $ary_row_index.push(parseInt($(this).attr('id').slice(4)));
    });

    $('table tbody th').css('background', '');
    $('table tbody td').css('background', '');

    for($j in $ary_row_index) {
      $('table tbody tr:nth-child('+$ary_row_index[$j]+') th').css('background', '#EFEBC2');
      $('table tbody tr:nth-child('+$ary_row_index[$j]+') td').css('background', '#EFEBC2');
    }// end for
  }// end function
  $auto_line_color();
});
</script>
<style>
table {
  border-collapse: collapse;
}
th, td {
  border:1px solid #999999;
  padding:5px;
}
</style>
</head>
<body>
<table>
  <tbody>
    <tr>
      <th>
        <input type="checkbox" id="row_1" value="1" name="row_1">行1
      </th>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <th>
        <input type="checkbox" id="row_2" value="1" name="row_2">行2
      </th>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <th>
        <input type="checkbox" id="row_3" value="1" name="row_3">行3
      </th>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
  </tbody>
</table>
</body>
</html>




■動作サンプル
http://xirasaya.com/demo/11/




今回のキモは:nth-child()疑似クラスを使っているところ。
これを使うと指定した行にのみスタイルを適用するといったことができる。




簡単な流れを以下で説明。



var $auto_line_color = function(){}で、無名関数を変数に格納。


無名関数の中では以下のことを行う。

1.
$('[id^="row_"]:checked')で、チェックボックスにチェックの付いているオブジェクトが取得。

2.
$ary_row_index.push(parseInt($(this).attr('id').slice(4)))で、行番号を取得しそれを配列に格納。

3.
$('table tbody th').css('background', '')で、以前に適用したスタイルをいったん削除。

4.
$('table tbody tr:nth-child('+$ary_row_index[$j]+') th').css('background', '#EFEBC2')で、指定した行にスタイルを適用。



あとは上記の無名関数が格納された$auto_line_colorという変数をclickイベントとか適当なところで呼び出している。





実際に組む場合はcss()でスタイルを直接いじるのではなく、addClass()、removeClass()スタイルを定義してあるクラスを操作した方がよい。
その方がいろいろと都合がよい。







Comments(1)

1  名無しさん  2014/12/05 (金) 14:34 ID:hytoBX215
実用的な割にはどこのサイトも詳しいことは書いておらず、
どうしたらいいのか苦戦してました。
おかげさまで解決できました。助かりました。