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 selecti

Solution 1:

get all td of div

$('#outer td')

Solution 2:

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

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

#Outertd:hover { background-color : lightblue; }​

(substitute your desired colour)

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

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