2012-07-17 7 views
15

Javaスクリプトを使用してテーブル内の単一セルの背景色を変更する必要があります。Javaスクリプトを使用してテーブル内のセルの背景色を変更する方法

ドキュメントの中で、私はすべてのセルのスタイルが同じである必要があります(これを使用するスタイルシートを使用する必要があります)。しかし、ボタンをクリックすると、最初のセルの色を変更する必要があります。 JSから設定し

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

backgroundColorは自分のスタイルシートでbackground-colorと同等である:以下

は、サンプルコード

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

答えて

30

はこれを試してみてくださいです。

.cellsコレクションは、表に属し、表自体には属していないことにも注意してください。すべての行のすべてのセルを取得するには、代わりにgetElementsByTagName()を使用します。

デモ:http://jsbin.com/ekituv/edit#preview

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

は、セルのIDを入れた後、セルの背景を変更します。

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

と思われます。私は.style.backgroundColorとは思わない。

関連する問題