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 に答える