jquery - jQueryで選択した行を強調表示するにはどうすればよいですか？

Question

jQuery 1.6.4を使用していて、htmlテーブルがあります。テーブルにid="tbl"を割り当て、クリックイベントを使用して、クリックされた行を動的に検索します。その行で強調表示して、ユーザーがクリックされた行を確認できるようにします。

jQueryブックでいくつかのコードを使用し、（this）で使用できるように変更しました。ただし、行は強調表示されていません。

これが私のコードです：

$('#tbl tr').click(function() { 
                //$('div.poem-stanza').addClass('highlight');
                $(this).addClass("highlight");
...

firebugで、（これが）tr要素を参照していることを確認しましたが、何らかの理由でコードが強調表示で機能しません。（this）を使用してこれを動的に機能させるには、何をする必要がありますか？

コメントに基づいて、私はダブルチェックし、cssファイルに.highlightがありませんでした。他の名前付き要素に追加しましたが、cssファイルへの参照にタイプミスがありました。ファイアバグのおかげで、ロードされたものと欠落しているものをすべて見ることができました。

score 2 · Accepted Answer

tr要素に背景色を設定することはできません。行を強調表示するには、この行の各tdを強調表示する必要があります。tr要素にhighlightクラスを指定すると仮定して、これをcssファイルに追加します。

.highlight td { background-color:green; }

行が緑色になっていることがわかります。

または、次のことを行うことができます。

$('#tbl tr').click(function() { 
      $(this).find('td').addClass("highlight");
});

幸運を！

score 1 · Accepted Answer

これらの行がDOMの後に動的に追加される場合は、テーブル全体でクリック関数を委任する必要があります。

$(document).live('click', '#tbl tr', function(){ 
  $(this).addClass('highlight"); 
});

score 1 · Accepted Answer

次の方法で使用できます。

$("tr").one("click", "#tbl", function() {
      $(this).addClass("highlight");
});

3 に答える 3