CSS Issue in JQuery

Question

I tried to apply color to rows of a table using the following code. It doesn't work, but I don't understand why. Could someone explain why or point me in the right direction?

HTML:

<table id="tblSample" border="1" cellpadding="0" cellspacing="0" width="300px">
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
</table>

JQuery:

$("#tblSample > tr").css("background-color", "gray");

score 6 · Accepted Answer · edited May 23 '17 at 11:47

6

You're missing the elusive tbody element.

http://jsfiddle.net/m7HTt/

You can do this:

$("#tblSample > tbody > tr").css("background-color", "gray");

or this:

$("#tblSample tr").css("background-color", "gray");

edited May 23 '17 at 11:47

Community

1
1

answered Feb 26 '11 at 06:15

thirtydot

224,678
48
389
349

score 1 · Answer 2 · answered Feb 26 '11 at 06:17

1

If you are looking to do alternating row colors you can do something as simple as this as well.

$("#tblSample tr:even").css("background-color", "gray");

answered Feb 26 '11 at 06:17

Mike Geise

825
7
15

Thanks Mike! yr solution also really helpful for me.i didn't know before we can apply alternate row color in this way. – Sukhjeevan Feb 26 '11 at 06:29

score -1 · Answer 3 · edited Feb 26 '11 at 06:31

-1

Try it

$("#tblSample  tr").css("background-color", "gray");

or

$("#tblSample tr td").css("background-color", "gray");

edited Feb 26 '11 at 06:31

S L

14,262
17
77
116

answered Feb 26 '11 at 06:15

Deepak

7,507
3
24
26

CSS Issue in JQuery

3 Answers3

Linked