背景を変更するJquery <TD>

Question

<td class="td_1">nbsp;</td><td class="td_1">nbsp;</td><td class="td_1">nbsp;</td> 
<td class="td_2">nbsp;</td><td class="td_2">nbsp;</td><td class="td_2">nbsp;</td> 
<td class="td_3">nbsp;</td><td class="td_3">nbsp;</td><td class="td_3">nbsp;</td> 
<td class="td_4">nbsp;</td><td class="td_4">nbsp;</td><td class="td_4">nbsp;</td> 

マウスオーバー時に背景を＃00000に変更するにはjqueryが必要、マウスオーバー時に元の色に変更する必要があります。これらはループ内で動的に生成されるので、td_100sまで上がることができます。

私はいくつかの例を試しましたが、不幸にも、カルルスの名前は静的であり、私にとってはうまくいきませんでした。

マウスがtd_1を超えると、それに応じてすべてのtd_1が影響を受けます。

Answer 1

を行う

td.hoverstate{background-color:#000;} 

のクラスを作ります。 CSSはその仕事をします：

#table_id td { 
    background: #ffffff; 
} 

#table_id td:hover { 
    background: #000000; 
    color: #ffffff; 
} 

これは、あなたのテーブルがCSSのためのIDか他のフックを持っていることを前提としています。あなたは、色を変更するには[はい、あなたには、いくつかのjavascriptが必要になりますすべて TDの同じクラスとしたい場合は、

オーケー他の細胞の要件に対応するために多額のUPDATING

。このような

何か作業をする必要があります：

$('td').hover(function(){ 
    var thisClass = $(this).attr('class'); 
    $('td.' + thisClass).addClass('hovered'); 
}, 
    function(){ 
    var thisClass = $(this).attr('class'); 
    $('td.' + thisClass).removeClass('hovered'); 
} 

は、次にCSSで：

.hovered { background: #000000; } 

私は一般的にCSSで色の宣言を行うのではなく、単にjQueryを使ってクラスを削除/追加しよう - それはです通常その方法を維持するのが簡単です。

Answer 2

はなぜダイナミックTD行のクラス名を設定し、事前に

のおかげ？ IDを 'td_1' ... 'td_100'に設定してみませんか？マウスオーバー時にクラスを変更しますか？またはcss3フィルタはどうですか？

Answer 3

行全体のホバーを実行しても問題ありません。あなたは、テーブルにクラス「table_class」を追加し、中に定義することができますので、（私はこれらの<td> sが<table>要素の内側にあると仮定）：またはtdのみ

$("#mytable tr").mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");}); 

Answer 4

私は次のようにしてくださいを行うには、このコードを変更CSS二つのクラス：

table.table_class td{ 
    background-color:#whatever; 
} 
table.table_class td:hover{ 
    background-color:#000; 
} 

注：あなたは、このソリューションでは全くのjQueryを必要としません。）

Answer 5

あなたCsにsが、その後、jQueryので、私はあなたがすべてでマウスオーバー効果のためのjQueryを必要としないと思う

$("td").hover(
     function() { 
     $(this).addClass("hoverstate"); 
     }, 
     function() { 
     $(this).removeClass("hoverstate"); 
     } 
    ); 

Answer 6

これをチェックしてください：http://jsfiddle.net/hKmTU/3/。私はそれがあなたが求めているように働いている。あなたがホバークラスを解析する必要があるので、chipcullenの答えはうまくいかないでしょう。

例： すべてのtd_1にカーソルを置くと、クラスは「td_1ホバリング」になります。その後

あなたは「td.td_1が推移」で終わるセレクタにthisClassを使用しようと、適切なdivを選択しないだろう

var thisClass = $(this).attr('class'); 
$('td.' + thisClass).removeClass('hovered'); 

becomes 

var thisClass = $(this).attr('class'); 
thisClass = thisClass.substring(0, thisClass.indexOf(" ")); 
$("td." + thisClass).removeClass('hovered'); 

・ホープ、このことができます！