HTML: Background color using jquery?

Question

HTML:

<table border="1"style="width:500px" id="table2">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>grades</th>
  </tr>
  <tr>
    <td>riddhi</td>
    <td>bhatt</td>
    <td>50</td>
  </tr>
  <tr>
    <td>sneh</td>
    <td>pandya</td>
    <td>55</td>
  </tr>
  <tr>
    <td>ankit</td>
    <td>purani</td>
    <td>60</td>
  </tr>
</table>

I want to add a background color in odd rows of table.

JQuery:

$(document).ready(function(){

    $("#table2 > tr:odd").css("background-color","blue");
});

I am new in HTML and jQuery, please suggest me so that I can proceed...

Shaunak D · Accepted Answer · 2014-06-12 06:20:23Z

3

Use this ,

$(document).ready(function(){

    $("#table2 tr:odd").css("background-color","blue");
});

Demo Fiddle

> won't work here - Reference

The table hierarcy is table > tbody > tr > td, so in that case, try this,

 $("#table2 > tbody > tr:odd").css("background-color","blue");

Demo

answered Jun 12, 2014 at 6:20

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aljgom · Accepted Answer · 2014-06-12 06:32:24Z

0

As others said,

$("#table2 tr:odd")

will select ALL of the odd tr's inside table2, it'll work for a simple table. But if you want to for example put a table inside table2, it will select the trs of the second table too, because they're also inside table2

if you want to select only the tr's from table2, but not the ones of a table inside table2, you would use

$("#table2>tbody>tr:odd")

which selects only the direct tr children of the direct tbody children of table2

answered Jun 12, 2014 at 6:32

aljgom

9,3873 gold badges38 silver badges30 bronze badges

Comments

Sudharsan S · Accepted Answer · 2014-06-12 06:20:47Z

0

Try this

$("#table2 tr:odd").css("background-color","blue");

DEMO

answered Jun 12, 2014 at 6:20

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-06-12 06:32:31Z

0

tbody, thead and tfoot is rendered by html so you need to use #table2 > tbody > tr:odd,#table2 > thead > tr:odd,#table2 > tfoot > tr:odd as a selector to make it work but you have no sense to use odd here. So simple if you just remove > then it will be fine:

$("#table2 tr:odd").css("background-color","blue");

edited Jun 12, 2014 at 6:32

answered Jun 12, 2014 at 6:21

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

Delphin Sam · Accepted Answer · 2014-06-12 06:48:15Z

0

IF none of the above working means please try to Change $ to jQuery, it will be work...

answered Jun 12, 2014 at 6:48

Delphin Sam

1422 silver badges13 bronze badges

1 Comment

Somnath Kharat Over a year ago

this is not a solution.When there is conflict u need to use your solution

komon · Accepted Answer · 2014-06-12 07:56:47Z

0

It works fine: http://jsbin.com/caxahube/1/edit

$(document).ready(function(){

  $('table>tbody>tr:odd').css('background-color', 'blue');

});

answered Jun 12, 2014 at 7:56

komon

35 bronze badges

Collectives™ on Stack Overflow

HTML: Background color using jquery?

6 Answers 6

Demo Fiddle

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related