25

我需要使用 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>
4

3 回答 3

47

尝试这个：

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

于 2012-07-17T06:37:21.560 回答
9 
<table border="1" cellspacing="0" cellpadding= "20">
    <tr>
    <td id="id1" ></td>
    </tr>
</table>
<script>
    document.getElementById('id1').style.backgroundColor='#003F87';
</script>

为单元格输入 id，然后更改单元格的背景。

于 2014-01-10T10:10:45.263 回答
4 
document.getElementById('id1').bgColor = '#00FF00';

似乎工作。我认为.style.backgroundColor不会。

于 2016-03-21T01:07:52.677 回答