How to change html td background colour through Javascript?

Question

<style type="text/css">
    td.a{
        background: yellow
    }
</style>

<table><td class="a"></td></table>

Above is a html/css code snippet. From it, you can know that the background colour of td portion is in yellow.

Later, I have added a html select drop down component. I hope to change the background colour from yellow to blue when I select another select drop down value. but I do not know how to do.

This should be a question related to changing css through Javacript. It is quite similar with this How to change HTML background with JavaScript Function? but u can see that my td component does not have id, it just has class.

Hope someone can help me, thank you.

Well, the obvious solution is to either give your td an id, or use document.getElementByClassName. Edit: for your reference — digawp
– digawp, Commented May 24, 2015 at 9:05

diadical · Accepted Answer · 2015-05-24 09:14:35Z

2

Assuming the colour you want to change the background of the cells (I'm assuming you'll have more than just the one) to is newColor then;

var tds = document.getElementsByClassName('a');
for (var x = 0; x < tds.length; x++) {
  tds[x].style.background = newColor;
}

answered May 24, 2015 at 9:14

diadical

1974 bronze badges

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

Comments

AppyMike · Accepted Answer · 2015-05-24 09:19:45Z

1

For changing all elements with the class name

var elements = document.getElementsByClassName("a");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor="blue";
}

Or to change a single element, as long as you know it's position.

var elements = document.getElementsByClassName("a");
elements[positon].style.backgroundColor="blue";//in your example position would be 0

If you give your element an id you can use the following

document.getElementById("idforelement").style.backgroundColor = "blue";

answered May 24, 2015 at 9:19

AppyMike

2,0741 gold badge24 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to change html td background colour through Javascript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related