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

【问题标题】：Get all the td tags of table which in div tag using JQUERY使用JQUERY获取div标签中表的所有td标签
【发布时间】：2012-03-06 13:16:48
【问题描述】：

嗨，

我有一个带有 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>

【问题讨论】：

顺便说一句，这不是关于 jQuery，而是关于 CSS selectors。

标签： jquery mouseover html-table

【解决方案1】：

获取所有td 的div

$('#outer td')

【讨论】：

如何避免改变没有值的td标签的背景色..??

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以使用以下命令选择该 div 中的所有 td：

$("#Outer td")

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

但是，您可以完全不使用 jQuery 或 JavaScript 来实现更改背景颜色的预期结果 - 将以下内容放入您的样式表中：

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

（替换你想要的颜色）

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

如何避免改变没有值的td标签的背景色..??
if(($this).text().length) { $(this).css('background-color','#CCC'); }