jQuery - изменение цвета определенного элемента таблицы

Question

У меня есть эта таблица:

<table border=1 id="Table">
<tr> <th> Product </th> <th> Price </th> <th> Shop </th> </tr>
<tr> <td> Stuff1 </td> <td> 10$ </td> <td> Shop1 </td></tr>
<tr> <td> Stuff2 </td> <td> 0$ </td> <td> Shop2 </td></tr>
</table>

На котором я пытаюсь использовать следующий код jQuery:

var cell = $("#Table").find("td")[4];
cell.css("background-color", "red");

$("#Table").find("td")[4].innerHTML дает мне Stuff2. Но я не могу изменить CSS вообще с помощью jQuery или даже использовать html().

Answer 1

Это:

var cell = $("#Table").find("td")[4];

дает элемент DOM с индексом 4, поэтому он имеет только собственные методы DOM.

Измените это на это для вызова методов jQuery:

var cell = $("#Table").find("td").eq(4);

или это:

var cell = $("#Table td").eq(4);

Answer 2

При использовании нотации массива вы получаете уже не объект jQuery, а простой dom-узел. Здесь вам нужно: eq selector:

var cell = $("#Table").find("td:eq(4)");
cell.css("background-color", "red");

ср. http://api.jquery.com/eq-selector/

Answer 3

Использование [] извлекает элемент DOM, поэтому впоследствии вы не можете использовать метод jcery .css ().

Использовать селектор:

var $cell = $("#Table").find("td:eq(4)"); // or $("#Table").find("td").eq(4);
$cell.css("background-color", "red");

Примечание: условно, переменные jquery должны начинаться с префикса $ (например, $cell), чтобы они легко были таковыми.