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.