如何使用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>

來源

2012-07-17 Kasma

試試這個：

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-17 06:37:21 nnnnnn

<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-10 10:10:45 Thilini

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

似乎工作。我不認爲.style.backgroundColor這樣做。

來源

2016-03-21 01:07:52 user3029797

如何使用java腳本更改表格中單元格的背景顏色

回答

相關問題