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>

回答

相关问题