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

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

Durante el documento, necesito que el estilo de todas las celdas sea el mismo (así que utilicé la hoja de estilos 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 ejemplo

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

Fuente

2012-07-17 Kasma

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 la colección .cells pertenece a una tabla fila, no a la tabla en sí. Para obtener todas las celdas de todas las filas, puede usar getElementsByTagName() en su lugar.

Demostración: http://jsbin.com/ekituv/edit#preview

Fuente

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>

Identificación puestos a la celda y luego cambiar el fondo de la celda.

Fuente

2014-01-10 10:10:45 Thilini

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

parece que funciona. No creo que .style.backgroundColor lo haga.

Fuente

2016-03-21 01:07:52 user3029797

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

Respuesta

Cuestiones relacionadas