How To Change Background Color Of Cell In Table Using Java Script

I need to change background color of single cell in table using java script. During document i need style of all cell should be same ( so used style sheet to add this. ) , but on

Solution 1:

Try this:

functionbtnClick() {
    var x = document.getElementById("mytable").getElementsByTagName("td");
    x[0].innerHTML = "i want to change my cell color";
    x[0].style.backgroundColor = "yellow";            
}

Set from JS, backgroundColor is the equivalent of background-color in your style-sheet.

Note also that the .cells collection belongs to a table row, not to the table itself. To get all the cells from all rows you can instead use getElementsByTagName().

Demo: http://jsbin.com/ekituv/edit#preview

Solution 2:

<tableborder="1"cellspacing="0"cellpadding= "20"><tr><tdid="id1" ></td></tr></table><script>document.getElementById('id1').style.backgroundColor='#003F87';
</script>

Put id for cell and then change background of the cell.

Solution 3:

document.getElementById('id1').bgColor = '#00FF00';

seems to work. I don't think .style.backgroundColor does.