CODEWITHSUNDEEP
jqueryselectiontablecell
Sefam
Sefam

Reputation: 1773

jQuery - Changing the color of a specific table element

I have this table:

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

On which I try using the following jQuery code:

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

$("#Table").find("td")[4].innerHTML gives me Stuff2. But I can't seem to change the css at all with jQuery or even use html().

Upvotes: 0

Views: 1690

Answers (3)

TimWolla
TimWolla

Reputation: 32701

When using the array-notation you get no longer a jQuery-object, but the plain dom-node. What you need here is the :eq selector:

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

cf. http://api.jquery.com/eq-selector/

Upvotes: 0

Didier Ghys
Didier Ghys

Reputation: 30666

Using [] extracts the DOM element so you cannot use .css() jquery method on it afterwards.

Use a selector: 

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

Note: by convention, jquery variables should prefixed with $(like $cell) so they are easily as such.

Upvotes: 0

RightSaidFred
RightSaidFred

Reputation: 11327

This:

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

gives you the DOM element at index 4 so it only has native DOM methods.

Change it to this to call jQuery methods:

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

or this:

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

Upvotes: 1

Related Questions