Как изменить цвет фона ячейки в таблице с помощью 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>

Ответ 1

Попробуй это:

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

Ответ 2

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