Get all the td tags of table which in div tag using JQUERY

问题

Hi,

I have a div tag with id which contains table inside. I want to change the background color of td tag while mouse over and out events using Jquery. What is the way of selecting the tds with in the div using jquery?

Sample code

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

回答1:

get all td of div

$('#outer td')

回答2:

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

回答3:

You can select all of the tds within that div with:

$("#Outer td")

Or, more generally, $("firstselector secondselector") will find all elements matching "secondselector" that are descendants of elements matching "firstselector".

However, you can achieve the desired result of changing the background colour without using jQuery or JavaScript at all - put the following in your stylesheet:

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

(substitute your desired colour)

Simple demo: http://jsfiddle.net/vZ9BF/

回答4:

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

Working example here: http://jsfiddle.net/U7qeJ/

来源：https://stackoverflow.com/questions/9584450/get-all-the-td-tags-of-table-which-in-div-tag-using-jquery