How to change background color of cell in table using java script

Question

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 button click i need to change color of first cell.

following is the sample code

<html lang="en">
  <head>    
    <script type="text/javascript" >        

    function btnClick()
    {
            var x = document.getElementById("mytable").cells;
            x[0].innerHTML = "i want to change my cell color";
            x[0].bgColor = "Yellow";            
    }
    </script>   
</head>
    <style>
    div
    {
    text-align: left; 
    text-indent: 0px; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px;
    }
    td.td
    {
                 border-width : 1px; 
                 background-color: #99cc00;
                 text-align:center;

    }
    </style>  
  <body>
  <div>  
    <table id = "mytable" width="100%" border="1" cellpadding="2" cellspacing="2" style="background-color: #ffffff;">
      <tr valign="top">
      <td class = "td"><br />  </td>
      <td class = "td"><br />  </td>
      </tr>
      <tr valign="top">
      <td class = "td"><br />  </td>
      <td class = "td"><br />  </td>
      </tr>
    </table>
  </div>
      <input type="button" value="Click" OnClick = "btnClick()">
  </body>
</html>

nnnnnn · Accepted Answer · 2012-07-17 06:37:21Z

58

Try this:

function btnClick() {
    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

answered Jul 17, 2012 at 6:37

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

Comments

Thilini · Accepted Answer · 2014-01-10 10:10:45Z

10

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

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

answered Jan 10, 2014 at 10:10

Thilini

1011 silver badge2 bronze badges

Comments

Kevin Kopf · Accepted Answer · 2016-03-21 01:10:17Z

5

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

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

edited Mar 21, 2016 at 1:10

Kevin Kopf

14.3k15 gold badges57 silver badges69 bronze badges

answered Mar 21, 2016 at 1:07

user3029797

671 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to change background color of cell in table using java script

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related