Cómo cambiar el color de fondo de la celda en la tabla usando el script Java

2 minutos de lectura

Necesito cambiar el color de fondo de una sola celda en la tabla usando el script java.

Durante el documento, necesito que el estilo de todas las celdas sea el mismo (así que usé la hoja de estilo para agregar esto), pero al hacer clic en el botón necesito cambiar el color de la primera celda.

siguiente es el código de muestra

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

Prueba esto:

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

Conjunto de JS, backgroundColor es el equivalente de background-color en su hoja de estilo.

Tenga en cuenta también que el .cells la colección pertenece a una tabla fila, no a la mesa en sí. Para obtener todas las celdas de todas las filas, puede usar en su lugar getElementsByTagName().

Manifestación: 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>

Ponga id para la celda y luego cambie el fondo de la celda.

avatar de usuario de user3029797
usuario3029797

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

parece funcionar. no creo .style.backgroundColor lo hace.

¿Ha sido útil esta solución?