如何在javascript中更改表格单元格的颜色

Question

This is my function

<script>
  function colorChange() {
     document.getElementById('change').bgcolor="#00CC99";
  }
</script>

and this is my table

 <?php>

 echo("<table border=\"1\" cellpadding=\"5\"><tr>\n");
 if($dayArray["month"] == $mydate[month])
 {
   echo ("<td id=\"change\" bgcolor=\"#FF99FF\">
   <a href=\"javascript:colorChange()\"</a>")></td>\n");
  } 
 echo (</table>);

but the color of the cell does not change. Can anybody help me?

Answer 1

There's no such property as bgcolor , there is however an attribute, but you should use element.style :

document.getElementById('change').style.background = "#00CC99";

or

document.getElementById('change').style.backgroundColor = "#00CC99";

or if you just have to change the attribute

document.getElementById('change').setAttribute('bgcolor', '#00CC99');

Answer 2

Your code looks very messy with html embedded inside php echo statements. Change this too:

<table border="1" cellpadding="5"><tr>
<?php
if($dayArray["month"] == $mydate[month])
{
?>
 <td id="change" style="background:#FF99FF"><a href="javascript:colorChange()">></a></td>
 <?php
  } 
 ?>
</tr>
</table>

//There is no property called 'bgcolor', use style.backgroundColor instead.

function colorChange(){
document.getElementById('change').style.backgroundColor="#00CC99"; bgcolor
}