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.
usuario3029797
document.getElementById('id1').bgColor="#00FF00";
parece funcionar. no creo .style.backgroundColor lo hace.