Question

您好，

我有一个带有id的div标签，里面包含表格。我想使用Jquery在鼠标翻转和输出事件时更改td标签的背景颜色。使用jquery在div中选择tds的方法是什么？

示例代码

<div id="Outer">
   <table>
     <tr><td>1</td><td>Rama</td><td>8088080980</td></tr>
     <tr><td>2</td><td>Krishna</td><td>454546</td></tr>
   </table>
</div>

Answer 1

获取td的所有div

$('#outer td')

Answer 2

$('#Outer').delegate('td', hover, function(e) {
   if (e.type == "mouseenter") this.style.backgroundColor = "#eee";
   else this.style.backgroundColor = "";
});

Answer 3

您可以选择该div中的所有tds：

$("#Outer td")

或者，更一般地说，$("firstselector secondselector")将找到与“secondselector”匹配的所有元素，这些元素是与“firstselector”匹配的元素的后代。

但是，您可以在不使用jQuery或JavaScript的情况下实现更改背景颜色的预期效果 - 将以下内容放在样式表中：

#Outer td:hover { background-color : lightblue; }

（替换您想要的颜色）

简单演示：http://jsfiddle.net/vZ9BF/

Answer 4

$('#Outer td').on('mouseenter', function() {
   $(this).css('background-color','#CCC');
}).on('mouseleave', function() {
   $(this).css('background-color','');
});

这里的工作示例：http://jsfiddle.net/U7qeJ/

使用JQUERY获取div标签中表的所有td标签

4 个答案: