jquery更改背景的<TD>

-2

<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>

我需要一個jquery將鼠標懸停時的背景和原始顏色更改爲鼠標懸停時的＃00000。這些都是在循環中動態生成的，因此可以達到td_100s。jquery更改背景的<TD>

我嘗試了一些例子，但不幸的是，calss名稱都是靜態的，並不適合我。

如果將鼠標懸停在td_1上，則應相應地影響所有td_1。

在此先感謝

來源

2012-04-13 BentCoder

此外，你可以像'td [class^=「td」]：hover {background-color：red;}'那樣使用CSS。 btw類名稱引用HTML元素可能是一個*混淆*的想法 – m90 2012-04-13 13:19:45

爲什麼你使用類而不是id？ – JotaBe 2012-04-13 13:22:01

我不認爲你需要的jQuery在所有的鼠標懸停效果。 CSS會做這個工作：

#table_id td { 
    background: #ffffff; 
} 

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

這假設你的表有一個ID或CSS的其他鉤子。

UPDATING巨資應對其他細胞需要量

好吧，如果你想所有的TD與同等級改變顏色，那麼，你將需要一些JavaScript。

像這樣的東西應該工作：

$('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; }

我一般都儘量只需添加/使用jQuery刪除類，而不是做在CSS顏色聲明 - 這是通常更容易保持這種方式。

來源

2012-04-13 13:25:02 chipcullen

爲什麼這會得到-1？沒有足夠的jQuery？ – 2012-04-13 13:28:09

如果將鼠標懸停在td_1上，則應相應地影響所有td_1。 – BentCoder 2012-04-13 13:38:05

爲什麼設置動態td行的類名???爲什麼不把他們的ID設置爲'td_1'...'td_100'？並在鼠標懸停時更改他們的類？或者css3過濾器怎麼樣？

來源

2012-04-13 13:21:36

可以爲整行做懸停嗎？或者修改這個代碼做td只

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

來源

2012-04-13 13:23:13 Tom

我會做到以下幾點：（我假設這些<td> s爲一個<table>元素中），這樣你就可以添加類「table_class」表，定義在CSS兩類：

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

注：你不需要的JQuery在所有與此解決方案;）

來源

2012-04-13 13:24:35

在你的CS S，做一個類

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

然後在jQuery的做

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

來源

2012-04-13 13:24:36

爲什麼不直接使用'：hover'讓它在沒有任何JS的情況下工作？ – m90 2012-04-13 13:25:15

這是一個好點，他要求jQuery，所以我認爲我會提供。 – 2012-04-13 13:33:38

好吧，看看這個：http://jsfiddle.net/hKmTU/3/。我已經按照你要求的方式工作了。 chipcullen的答案將不起作用，因爲你需要解析懸停類。

例如：當您將鼠標懸停在所有td_1上時，該類將變爲「td_1徘徊」。

然後當你試圖在你最終選擇使用thisClass「td.td_1徘徊」，這將不會選擇合適的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');

希望這有助於！

來源

2012-04-13 18:20:30

jquery更改背景的<TD>

回答

相關問題