Question

我需要使用java脚本更改表格中单个单元格的背景颜色。

在文档中我需要所有单元格的样式应该相同（所以使用样式表来添加它。），但是在按钮单击时我需要更改第一个单元格的颜色。

以下是示例代码

<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>

Answer 1

试试这个：

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

从JS设置，backgroundColor相当于样式表中的background-color。

另请注意，.cells集合属于表行，而不属于表本身。要获取所有行中的所有单元格，您可以使用getElementsByTagName()。

演示：http://jsbin.com/ekituv/edit#preview

Answer 2

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

为单元格添加id，然后更改单元格的背景。

Answer 3

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

似乎有效。我不认为.style.backgroundColor会这样做。

如何使用javascript更改表格中单元格的背景颜色

3 个答案: