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

问题描述：

我需要使用java脚本更改表格中单个单元格的背景颜色。如何使用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>

答

试试这个：

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

答

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

戴上ID为单元格，然后更改单元格的背景。

答

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

似乎工作。我不认为.style.backgroundColor这样做。

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

相关推荐