Получить все теги td таблицы, которые в теге div используют JQUERY

Question

Привет,

У меня есть тег div с id, который содержит таблицу внутри. Я хочу изменить цвет фона тега td при наведении указателя мыши на события, используя Jquery. Как выбрать tds в div с помощью jquery?

Пример кода

<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 td').on('mouseenter', function() {
   $(this).css('background-color','#CCC');
}).on('mouseleave', function() {
   $(this).css('background-color','');
});

Рабочий пример здесь: http://jsfiddle.net/U7qeJ/

Answer 3

Вы можете выбрать все tds в этом div с помощью:

$("#Outer td")

Или, в более общем смысле, $("firstselector secondselector") найдет все элементы, соответствующие "secondselector", которые являются потомками элементов, соответствующих "firstselector".

Тем не менее, вы можете достичь желаемого результата, изменяя цвет фона, не используя jQuery или JavaScript - добавьте в таблицу стилей следующее:

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

(замените желаемый цвет)

Простая демонстрация: http://jsfiddle.net/vZ9BF/

Answer 4

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