Color de fondo de una celda al pulsar sobre una caja de texto

[Chispi]

Buenos dias,

Me gustaría saber si es posible, que al coger el foco una caja de texto, el color de fondo de éste y de la celda que la contiene cambie de color.

Yo he conseguido que cuando coga el foco la caja de texto, cambie de color, haciendo esto:

function foco(celda){
celda.style.backgroundColor = "#FAFAD2";
}

function focoFuera(celda){
celda.style.backgroundColor = "#ffffff";
}

Con la linia que sigue a continuación, he conseguido que cuando la celda coga el foco, si tiene una etiqueta input dentro, se pinte. Pero el problema esta que el foco lo coge la caja de texto no la celda.
//celda.children.tags('INPUT')[0].style.backgroundColor = "#DADFFA";

Hay alguna manera de hacerlo al reves, me explico, en lugar de mirar si tienes hijos que cuelgan de la celda, y en este caso <input>, no puedo hacer que desde el input mire si tiene padre, y éste sea una celda <td>


La celda con la caja de texto que tengo, es la que describo a continuación:
<td height="25" bgColor="#ffffff" id="celda1">
<input name="login" type="text" style="border:0px solid #FFFFFF" id="login" onFocus="foco(this);" onBlur="focoFuera(this);">
</td>



USO:
Poniendo en estilos que la caja de texto no tiene borde, al pulsar sobre ésta si se ilumina todo, es decir, caja de texto y celda, quedaria un efecto muy chulo para los formularios.

[angsanchez]

Hola, Chispi
No estoy seguro de si una celda puede recibir el foco, pero con esto

Código HTML:

<td id="celda3">
<form>
<input type="text" onFocus="document.getElementById('celda3').style.background='red'">
</form>
</td> 

cuando la caja de texto coge el foco, la celda se pinta
¿Es eso lo que buscas?
La clave está en poner un ID a la celda. Podrías usar tu función foco() pero aplicada a la celda con ID. Claro que tienes que usar el nombre concreto de la celda en cuestión, no algo genérico dentro de la estructura de nodos como buscabas.

[Chispi]

Muchas gracias,

Mas o menos sabía que iba con el id y el getElementById, pero no me acababa de salir, porque lo intentaba hacer en una funcion aparte, pero no me cogia bien el identificador.

Con lo que tu me has dado, y con la funcion que tenia yo antes para cambiar el color de la caja de texto, funciona a la perfección.

Otra vez muchas gracias.

PD: La celda si que puede coger el foco, para ello, debes pulsar en la celda.

[caricatos]

Hola a todos:

También puedes subir por el árbol de nodos y encontrar el padre (parentNode)

function focoFuera(celda){
celda.style.backgroundColor = "#ffffff";
celda.parentNode.style.backgroundColor = "#DADFFA";
}

Saludos

[Chispi]

Muchas gracias, caricatos.

Esto viene bien, sino sabes el identificador, y ahorras tener que ir celda a celda, cambiando el foco, sobre todo si son muchos.

Un saludo!

[caricatos]

Iniciado por Chispi

Muchas gracias, caricatos.

Esto viene bien, sino sabes el identificador, y ahorras tener que ir celda a celda, cambiando el foco, sobre todo si son muchos.

Un saludo!

Sin duda has resumido algunas de las ventajas del DOM (Document Object Model)

Me alegra que lo sepas apreciar.

Saludos