Setting the style property for table rows using javascript

Question

Assume I have a page like this

<html>    
    <body>
        <table id="t1">
            <tr><th>Head1</th><th>Head2</th></tr>
            <tr><td>1</td><td>2</td></tr>
            <tr><td>3</td><td>4</td></tr>
      </table>
   </body>
</html>

My CSS

table th { background:color1;} 
table td { background:color2;}

How do I change the background color for all rows except header row with a javascript statement. Is looping through each row and column the only method?

I can get document.getElementById('t1').rows[1] and rows[2] and change background. But is there another efficient way?

th and td already have different colors color1 and color2 so aren't they already different? — Anjan Biswas
– Anjan Biswas, Commented Aug 9, 2012 at 18:06
@Annjawn They are! I want to hightlight just the tds with a different color(different than color2) on a particular client click. — Jeff
– Jeff, Commented Aug 9, 2012 at 18:13

Clyde Lobo · Accepted Answer · 2012-08-09 18:17:25Z

8

You can loop over the elements and change the background

var els = document.getElementById("t1").getElementsByTagName("td");

for(var i=0;i<els.length;i++){
  els[i].style.background = "green"   
}

answered Aug 9, 2012 at 18:17

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

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

2 Comments

Jeff Over a year ago

This is what I was planning to do. Was checking if there was some other efficient method.

Anjan Biswas Over a year ago

Looks like this is the only way what you want to do.

David Fells · Accepted Answer · 2012-08-11 02:45:57Z

3

put a class on the rows and put backgrounds in css like you do with the tables

edited Aug 11, 2012 at 2:45

David Fells

6,8081 gold badge24 silver badges34 bronze badges

answered Aug 9, 2012 at 18:07

Santiago Elvira Ramirez

1,1918 silver badges28 bronze badges

1 Comment

Jeff Over a year ago

The number of rows are not known in advance. I would guess it is better to loop through each row than give an id for each row. My question is if I can do this without looping!

Teemu · Accepted Answer · 2012-08-11 10:54:25Z

3

You can try this:

table th {background: color1;}
table tbody {background: color2;}

<table id="t1">
    <tr><th>Head1</th><th>Head2</th></tr>
    <tbody id="t2">
        <tr><td>1</td><td>2</td></tr>
        <tr><td>3</td><td>4</td></tr>
    </tbody>
</table>

And in the script:

document.getElementById('t2').style.backgroundColor=color3;

EDIT

It's also possible to add a rule to the particular styleSheet.

CSS:

table th {background: color1;}
table td {background: color2;}

Script:

var sSheet = document.styleSheets[0];
if (sSheet.insertRule) {
    sSheet.insertRule('td {background-color: color3}', sSheet.cssRules.length);
} else { // For IE < 9
    sSheet.addRule('td', 'background-color: color3', -1);
}

You can also modify an existing rule itself:

var tdRule,
    sSheet = document.styleSheets[0];       
if (sSheet.cssRules) {
    tdRule = sSheet.cssRules[1];
} else { // For IE < 9
    tdRule = sSheet.rules[1];
}
tdRule.style.backgroundColor = color3;

edited Aug 11, 2012 at 10:54

answered Aug 9, 2012 at 18:37

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

3 Comments

Jeff Over a year ago

tbody style would be overidden by td style

Teemu Over a year ago

@Jeff That's why there is not td style defined in my code :). Ofcourse you can style tds, just not set background for those.

Teemu Over a year ago

@Jeff I've edited my answer. There are now two more methods available to change background-color of the tds, without any kind of looping.

ElGavilan · Accepted Answer · 2016-05-06 13:23:12Z

-1

I use JQuery.

$('td').css('background','#3232');

edited May 6, 2016 at 13:23

ElGavilan

6,97216 gold badges30 silver badges36 bronze badges

answered Aug 9, 2012 at 18:39

Francisco Albert

1,7512 gold badges20 silver badges40 bronze badges

1 Comment

Clyde Lobo Over a year ago

Even for jquery, the code you've written wont work. Its $(td).css('background','#3232');

Collectives™ on Stack Overflow

Setting the style property for table rows using javascript

4 Answers 4

2 Comments

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related