0


私のタイトルがあまり混乱しないことを願っています。問題にタイトルを付けるより良い方法があれば教えてください。
テーブルの奇数行に背景色を適用するjQuery関数があり、ホバーすると色が赤に変わります。しかし、テーブルを動的に編集すると、jQuery が機能しなくなります。
私はJSイベント委任について多くのことを読みましたが、実際のイベントなしでこれを機能させる方法についての情報を見つけることができませんでした...

$(document).ready(function(){
    //add background-color to all odd rows
    //very important!!!
    $("#tab3 tbody tr:odd").css("background-color", "#DCF1FD");
    //change color on hover 
    //less important!!!     
    $("#tab3 tbody tr").hover(
      function () {
        $(this).css("color", "red");
      },
      function () {
        $(this).css("color", "#000");
      }
    );
});

テーブルを編集した後に機能させる方法はありますか。

編集：
これはIE8で動作する必要があります

4

2 に答える 2

1

delegateイベントはテーブルの各行ではなくテーブルに関連付けられているため、テーブルの行を動的に更新しても機能するテーブルでjQuery を使用します。

$(document).ready(function(){
    $("#tab3 tbody tr:odd").css("background-color", "#DCF1FD");


    $("#tab3").delegate('tbody tr', 'hover', function(){
        $(this).css("color", "red");
      },
      function () {
        $(this).css("color", "#000");
    });
});

テーブル全体を動的に更新する場合は、これを使用します

$(document).delegate('#tab3 tbody tr', 'hover', function(){
        $(this).css("color", "red");
      },
      function () {
        $(this).css("color", "#000");
 });

単純なcssで奇数行の背景色を設定できます

#tab3 tbody tr:nth-child(odd)
{ 
   background: #DCF1FD; 
}
于 2011-08-16T20:32:52.100 に答える
0

... または、CSS を使用して、偶数行、奇数行、およびホバー状態の背景を定義することもできます。この質問に対する最初の回答を参照してください。（編集：リンクを修正しました。間違ったSOスレッドを指していました）。

于 2011-08-16T20:44:54.493 に答える