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   lt html lang  en  gt     lt head gt           lt script type  text javascript   gt               function btnClick                     var x   document getElementById  mytable   cells              x 0  innerHTML    i want to change my cell color               x 0  bgColor    Yellow                          lt  script gt      lt  head gt       lt style gt      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              lt  style gt       lt body gt     lt div gt         lt table id    mytable  width  100   border  1  cellpadding  2  cellspacing  2  style  background-color   ffffff   gt         lt tr valign  top  gt         lt td class    td  gt  lt br   gt    lt  td gt         lt td class    td  gt  lt br   gt    lt  td gt         lt  tr gt         lt tr valign  top  gt         lt td class    td  gt  lt br   gt    lt  td gt         lt td class    td  gt  lt br   gt    lt  td gt         lt  tr gt       lt  table gt     lt  div gt         lt input type  button  value  Click  OnClick    btnClick    gt     lt  body gt   lt  html gt

User · Accepted Answer

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

User · Answer

lt table border  1  cellspacing  0  cellpadding   20  gt       lt tr gt       lt td id  id1   gt  lt  td gt       lt  tr gt   lt  table gt   lt script gt      document getElementById  id1   style backgroundColor   003F87    lt  script gt    Put id for cell and then change background of the cell

User · Answer

document getElementById  id1   bgColor     00FF00     seems to work  I don t think  style backgroundColor does

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

Examples related to javascript

Examples related to html