jqueryを使用してテーブルの行を選択する方法は？

Question

私は自分のアプリケーションでテーブルを作成しました.Gmailのチェックボックスをクリックすると全体の行を選択（背景色を変更）します.gmailのチェックボックスをクリックすると、行全体が黄色になります。

<table> 
<tbody> 
<tr> 
<td><input type="checkbox" name="chk" id="chk" /></td> 
<td>My Name</td> 
<td>Description of the job</td> 
</tr> 
</tbody> 
</table> 

jqueryで同じことを行う方法を教えてください。

Answer 1

$(function() { 
    $("#chk").click(function() { 
    $(this).parents("tr").toggleClass("diffColor"); 
    }); 
}); 

（上記 "diffColor" と呼ばれる）CSSクラスを作成して、何か方法は背景色を追加：

<style type="text/css"> 
tr.diffColor td { background-color: yellow; } 
</style> 

は、CSS属性を直接設定しないでくださいを。可能であれば、クラスを使用する。

Answer 2

Cletusの答えが正しいですが、私は少し改善することができると思う：

$(function() { 
    $("#chk").click(function() { 
     $(this) 
      .parents("tr:first") 
      .toggleClass("diffColor", this.checked) 
     ; 
    }); 
}); 

ここでの唯一の本当の違いは次のとおりです。

1. それが唯一の最初親<tr>を選択します。 ...あなたのコードがどこで終わるかも知れないことは決してありません。さらに理論的には、それはより迅速なチックになります。
2. チェックボックスの新しい値をチェックし、必要に応じてクラスを追加または削除します。これをチェックせずに、行の "diffColour"クラスを変更する可能性がある他のコードと、あなたが意味するものが分かっていれば、チェックボックスが反転します。

また、あなたにもchangeハンドラにその機能を結合検討するかもしれない：

$('#chk').bind('click change', function() { // ... etc 

Answer 3

テーブルの行を選択するためのあなたは、私がTableRowSelector呼ば書いた単純なクラスを使用することができます。 例とコード例をチェックするhere