cambiar de color a celda en varios radio button

ciurix · #1 (**permalink**) 17/11/2012, 11:02

Hola a todos.
Haber si pueden ayudarme.
tengo este script que funciona perfectamente en un solo radio button del formulario.
ahora quiero añadir dos radio button más y no trabaja bien el script.
este es el codigo.

Código:

<html>
<head>
<title>color button
</title>

<script>
function ini() {
	tab=document.getElementById('tabla');
	for (i=0; ele=tab.getElementsByTagName('TR')[i]; i++) {	
		ele.onmouseover = function() {iluminar(this,true)};
		ele.onmouseout = function() {iluminar(this,false)};
		ele.cells[0].onclick = function() {marcar(this)};
	}
}

function iluminar(obj,valor) {
estado = obj.getElementsByTagName("TD")[0].firstChild.checked;
if (!estado)
	obj.style.backgroundColor = (valor) ? 'red' : 'white';
}

var marca = null;
function marcar(obj) {
	if (marca != null && marca != obj)	marca.parentNode.style.backgroundColor = "white";
	marca = obj;
}

window.onload = ini;
</script>
<script>
function ini() {
	tab=document.getElementById('tabla2');
	for (i=0; ele=tab.getElementsByTagName('TR')[i]; i++) {	
		ele.onmouseover = function() {iluminar(this,true)};
		ele.onmouseout = function() {iluminar(this,false)};
		ele.cells[0].onclick = function() {marcar(this)};
	}
}

function iluminar(obj,valor) {
estado = obj.getElementsByTagName("TD")[0].firstChild.checked;
if (!estado)
	obj.style.backgroundColor = (valor) ? 'red' : 'white';
}

var marca = null;
function marcar(obj) {
	if (marca != null && marca != obj)	marca.parentNode.style.backgroundColor = "white";
	marca = obj;
}

window.onload = ini;
</script>
<script>
function ini() {
	tab=document.getElementById('tabla3');
	for (i=0; ele=tab.getElementsByTagName('TR')[i]; i++) {	
		ele.onmouseover = function() {iluminar(this,true)};
		ele.onmouseout = function() {iluminar(this,false)};
		ele.cells[0].onclick = function() {marcar(this)};
	}
}

function iluminar(obj,valor) {
estado = obj.getElementsByTagName("TD")[0].firstChild.checked;
if (!estado)
	obj.style.backgroundColor = (valor) ? 'red' : 'white';
}

var marca = null;
function marcar(obj) {
	if (marca != null && marca != obj)	marca.parentNode.style.backgroundColor = "white";
	marca = obj;
}

window.onload = ini;
</script>

</head>
<body style="width:500px"
<table width="50%" align="center">
<tr><td>
<form id="formu">
<table id="tabla" border="1"> 

<tr>
 <td><input type="radio" name="sex" value="1"></td>
 <td>Hombre</td>

</tr> 
<tr>
 <td><input type="radio" name="sex" value="2"></td>
 <td>Mujer</td>
 
</tr> 
</table>
</form>
<form id="formu2">
<table id="tabla2" border="1"> 
<tr>
 <td><input type="radio" name="lugar" value="1"></td>
 <td>BARCELONA</td>
 
 
</tr> 
<tr>
 <td><input type="radio" name="lugar" value="2"></td>
 <td>Otra provincia</td>

 
</tr> 
<tr>
 <td><input type="radio" name="lugar" value="3"></td>
 <td>Otro pais</td>

 
</tr> 
</table>
</form>
<form id="formu3">
<table id="tabla3" border="1"> 
<tr>
 <td><input type="radio" name="motivo" value="1"></td>
 <td>leer</td>
 
 
</tr> 
<tr>
 <td><input type="radio" name="motivo" value="2"></td>
 <td>escribir</td>

 
</tr> 
<tr>
 <td><input type="radio" name="motivo" value="3"></td>
 <td>leer-escribir</td>

 
</tr> 
</table>
</form>
</td></tr>
</table>
</body>
</html>

solo hace caso al primer radio button.
como tendria de hacerlo para los otros dos.

Gracias.

Albuss · #2 (**permalink**) 17/11/2012, 21:35

he probado el script , ami me funciona, he utilizado chrome.

ciurix · #3 (**permalink**) 18/11/2012, 04:51

Hola Albuss.
Pues no entiendo que pasa. Has modificado algo del codigo?
Yo he probado tambien en Chrome y pasa lo mismo.

los colores de la celda solo mes los cambia en una tabla

incluso si las cambio de posicion. me hace caso de la 1ª , 2ª o 3ª tabla pero no mas de una a la vez.
Cada tabla le he dado un nombre diferente pero los scripts tienen el mismo nombre solo cambia el id diferente a buscar para cada tabla.
tiene algo que ver
Si en Chrome te funciona, puedes mirar con IE. o FFox. ??.
continuo investigando.
si puedes decirme algo más.
gracias.

Albuss · #4 (**permalink**) 18/11/2012, 05:59

he estado probando en el debuger y aparte de que no tira ningún error , he probado las functiones por separado y no fallan.

En IE si que no va pero como no tiene debugger no te podria decir, y en firefox si que va y tampoco me tira ningún error el debugger.

ciurix · #5 (**permalink**) 18/11/2012, 06:35

Hola de nuevo.
¿¿¿ te cambia de colores en las tres tablas???

no entiendo.. a mi no y lo he mirado en diferentes ordenadores y navegadores..
gracias.

satjaen · #6 (**permalink**) 18/11/2012, 17:29

Hola ciurix, si te sirve de algo yo lo he probado y solo funciona la tabla de leer.
Un saludo

furoya · #7 (**permalink**) 18/11/2012, 20:18

Una duda: ¿De verdad no ven donde está el "problema", o se están divirtiendo con el pobre ciurix?

Y vos, ciurix, ¿ves un código que anda -y que no entendés- y suponés que si lo copiás y pegas tres veces va a funcionar "tres veces"?

Por favor, aprendan javascript. La burrada ahí es más que evidente. No puede ser que alguien venga con este planteo, y que le estén dando vueltas en 6 post, como si fuera un asunto serio.

problemas con 2 scripts

Empezá cambiando los nombres de la función por tres distintos, y ejecutalas con el mismo onload a las tres.
Después, cuando ya tengas esa versión funcionando, juntás todas las funciones en una. Pero eso para cuando aprendás javascript. De otra forma, ni te metás a hacer esto.

ciurix · #8 (**permalink**) 19/11/2012, 07:51

Holas.
Bueno gracias a los tres. Pero un poco más a Furoya ya que aún siendo un poco duro al menos me ha ayudado a resolver el script con su comentario de como montarlo.

no se veia antes.. y respondian que si....

Gracias.

emprear · #9 (**permalink**) 19/11/2012, 09:07

Cita:

Iniciado por ciurix

Holas.
Bueno gracias a los tres. Pero un poco más a Furoya ya que aún siendo un poco duro al menos me ha ayudado a resolver el script con su comentario de como montarlo.

no se veia antes.. y respondian que si....

Gracias.

@ciurix:
hago pública mi valoración en el afán de que otros usuarios más "suceptibles" imiten tu conducta.
@furoya puede ser duro a veces, pero si lo sabés leer se sacan cosas muy positivas de sus participaciones.
Reitero entonces mi felicitación hacia tí por haber sacado provecho de su respuesta sin ofenderte.
Saludos

furoya · #10 (**permalink**) 19/11/2012, 10:22

Cita:

Iniciado por emprear

@furoya puede ser duro a veces, pero si lo sabés leer se sacan cosas muy positivas de sus participaciones.

No sé si productivas, pero para zafar creo que sirven.

Cita:

Iniciado por ciurix

Holas.
Bueno gracias a los tres. Pero un poco más a Furoya ya que aún siendo un poco duro al menos me ha ayudado a resolver el script con su comentario de como montarlo.

no se veia antes.. y respondian que si....

Justamente por eso creí que te estaban jodiendo. Y es cierto que suelo ser un poco duro, tampoco es que me guste, pero acá ya nos demostraron que por las buenas no entienden y no nos dejan otra opción para mantener cierto nivel en los Foros.

Por otro lado, fijate que emprear te está felicitando por algo que debería ser lo normal, y que aquí ya es rareza.

Más de una vez estos desubicados tienen el valor de cuestionar cómo reconocemos quién sabe y quién no, para decidir a cuál responderle. Y claramente con tantos años de respondedores en foros, lo sabemos. Es verdad que copiaste y pegaste sin entender, pero estaba seguro que con una guía mínima lo ibas a sacar. Por eso te dejé el enlace, ahí tenías un ejemplo de como se juntan funciones desparramadas en el codigo dentro de un mismo window.onload=.
Los participantes de ese tema no se merecían la respuesta, pero aposté a que en algún momento me iba a servir de ejemplo para poner en otro post.

Para terminar, si no ponías el código completo entre etiquetas de código, ni te lo miraba. Eso también es para destacar, porque en estos foros hasta respondedoras históricas y muy capaces tiene la maldita costumbre de ponerlo suelto o entre etiquetas de cita (¿a vos te parece? ¡entre etiquetas de cita!).

Cuando tengás la versión funcionando, pasala por acá y te decimos cómo pulirla para que quede más presentable.

Ah!, de nada.

ciurix · #11 (**permalink**) 19/11/2012, 11:11

Hola de nuevo.
Bueno segun el ejemplo del principio.
modificado asi , funciona.

gracias de nuevo.

<html>
<head>
<title>color button
</title>

<script>
function ini() {
tab=document.getElementById('tabla');
for (i=0; ele=tab.getElementsByTagName('TR')[i]; i++) {
ele.onmouseover = function() {iluminar(this,true)};
ele.onmouseout = function() {iluminar(this,false)};
ele.cells[0].onclick = function() {marcar(this)};
}
}
function iluminar(obj,valor) {
estado = obj.getElementsByTagName("TD")[0].firstChild.checked;
if (!estado)
obj.style.backgroundColor = (valor) ? 'red' : 'white';
}

var marca = null;
function marcar(obj) {
if (marca != null && marca != obj) marca.parentNode.style.backgroundColor = "white";
marca = obj;
}

function ini2() {
tab2=document.getElementById('tabla2');
for (i=0; ele=tab2.getElementsByTagName('TR')[i]; i++) {
ele.onmouseover = function() {iluminar2(this,true)};
ele.onmouseout = function() {iluminar2(this,false)};
ele.cells[0].onclick = function() {marcar2(this)};
}
}
function iluminar2(obj,valor) {
estado = obj.getElementsByTagName("TD")[0].firstChild.checked;
if (!estado)
obj.style.backgroundColor = (valor) ? 'red' : 'white';
}

var marca2 = null;
function marcar2(obj) {
if (marca2 != null && marca2 != obj) marca2.parentNode.style.backgroundColor = "white";
marca2 = obj;
}

function ini3() {
tab3=document.getElementById('tabla3');
for (i=0; ele=tab3.getElementsByTagName('TR')[i]; i++) {
ele.onmouseover = function() {iluminar3(this,true)};
ele.onmouseout = function() {iluminar3(this,false)};
ele.cells[0].onclick = function() {marcar3(this)};
}
}
function iluminar3(obj,valor) {
estado = obj.getElementsByTagName("TD")[0].firstChild.checked;
if (!estado)
obj.style.backgroundColor = (valor) ? 'red' : 'white';
}

var marca3 = null;
function marcar3(obj) {
if (marca3 != null && marca3 != obj) marca3.parentNode.style.backgroundColor = "white";
marca3 = obj;
}

window.onload=function()
{

ini();
ini2();
ini3();
//
}
//window.onload = ini;
</script>
</head>
<body style="width:500px;align:center;margin:auto"
<table width="50%" align="center">
<tr><td>
<form id="formu">
<table id="tabla" border="1">

<tr>
<td><input type="radio" name="sex" value="1"></td>
<td>Hombre</td>

</tr>
<tr>
<td><input type="radio" name="sex" value="2"></td>
<td>Mujer</td>

</tr>
</table>
</form>
<form id="formu2">
<table id="tabla2" border="1">
<tr>
<td><input type="radio" name="lugar" value="1"></td>
<td>BARCELONA</td>

</tr>
<tr>
<td><input type="radio" name="lugar" value="2"></td>
<td>Otra provincia</td>

</tr>
<tr>
<td><input type="radio" name="lugar" value="3"></td>
<td>Otro pais</td>

</tr>
</table>
</form>
<form id="formu3">
<table id="tabla3" border="1">
<tr>
<td><input type="radio" name="motivo" value="1"></td>
<td>leer</td>

</tr>
<tr>
<td><input type="radio" name="motivo" value="2"></td>
<td>escribir</td>

</tr>
<tr>
<td><input type="radio" name="motivo" value="3"></td>
<td>leer-escribir</td>

</tr>
</table>
</form>
</td></tr>
</table>
</body>
</html>

satjaen · #12 (**permalink**) 19/11/2012, 14:40

Bueno, ciurix yo no me puedo echar flores y aporto lo que puedo. Si te sigue sirviendo de algo lo he probado y funciona OK.

Un saludo

furoya · #13 (**permalink**) 19/11/2012, 15:19

Ah, no. Si ahora no lo pusiste entre entre etiquetas code, no te ayudo más.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><html>
<head>
<title>color button</title>

<script type="text/javascript">
var ele, ele2, ele3;
var marca = null;
var marca2 = null;
var marca3 = null;

function ini() {
var tab=document.getElementById('tabla');
var tab2=document.getElementById('tabla2'); 
var tab3=document.getElementById('tabla3');

for (i=0; ele=tab.getElementsByTagName('TR')[i]; i++) {	
ele.onmouseover = function() {iluminar(this,true)};
ele.onmouseout = function() {iluminar(this,false)};
ele.cells[0].onclick = function() {marcar(this)};
}

for (i=0; ele2=tab2.getElementsByTagName('TR')[i]; i++) {	
ele2.onmouseover = function() {iluminar(this,true)};
ele2.onmouseout = function() {iluminar(this,false)};
ele2.cells[0].onclick = function() {marcar2(this)};
}

for (i=0; ele3=tab3.getElementsByTagName('TR')[i]; i++) {	
ele3.onmouseover = function() {iluminar(this,true)};
ele3.onmouseout = function() {iluminar(this,false)};
ele3.cells[0].onclick = function() {marcar3(this)};
}

}


function iluminar(obj,valor) {
var estado = obj.getElementsByTagName("TD")[0].firstChild.checked;
if (!estado)
obj.style.backgroundColor = (valor) ? 'red' : 'white';
}

function marcar(obj) {
if (marca != null && marca != obj)	marca.parentNode.style.backgroundColor = "white";
marca = obj;
}

function marcar2(obj) {
if (marca2 != null && marca2 != obj)	marca2.parentNode.style.backgroundColor = "white";
marca2 = obj;
}

function marcar3(obj) {
if (marca3 != null && marca3 != obj)	marca3.parentNode.style.backgroundColor = "white";
marca3 = obj;
}

window.onload = ini;
</script>
</head>
<body style="width:500px;align:center;margin:auto"
<table width="50%" align="center">
<tr><td>
<form id="formu">
<table id="tabla" border="1"> 
<tr>
<td><input type="radio" name="sex" value="1"></td>
<td>Hombre</td>
</tr> 
<tr>
<td><input type="radio" name="sex" value="2"></td>
<td>Mujer</td>
</tr> 
</table>
<table id="tabla2" border="1"> 
<tr>
<td><input type="radio" name="lugar" value="1"></td>
<td>BARCELONA</td>
</tr> 
<tr>
<td><input type="radio" name="lugar" value="2"></td>
<td>Otra provincia</td>
</tr> 
<tr>
<td><input type="radio" name="lugar" value="3"></td>
<td>Otro pais</td>
</tr> 
</table>
<table id="tabla3" border="1"> 
<tr>
<td><input type="radio" name="motivo" value="1"></td>
<td>leer</td>
</tr> 
<tr>
<td><input type="radio" name="motivo" value="2"></td>
<td>escribir</td>
</tr> 
<tr>
<td><input type="radio" name="motivo" value="3"></td>
<td>leer-escribir</td>
</tr> 
</table>
</form>
</td></tr>
</table>
</body>
</html>

zerokilled · #14 (**permalink**) 19/11/2012, 16:44

Cita:

Iniciado por furoya

Para terminar, si no ponías el código completo entre etiquetas de código, ni te lo miraba.

un poquito de offtopic. @furoya, fíjate la edición del tema inicial.

me tomé el atrevimiento de editar el mensaje inicial para poner el código entre bbocde [code][/code] porque estaba conciente de que algo así podía suceder. así que le facilite la oportunidad a que otros puedan leer el código y así obener una respuesta. nunca le hice mención de ese detalle, mis agradecimientos por tomarte la molestia.

ciurix · #15 (**permalink**) 19/11/2012, 17:13

Hola a todos.
y gracias zerokilled por editar mi primer post. no hubiera llegado a su fin.
cuando lo inserte no me di cuenta. ¿ si alguien puede modificarlo?
Furoya no volverá a pasar.
Ok.

furoya · #16 (**permalink**) 20/11/2012, 07:42

Cita:

Iniciado por satjaen

...yo no me puedo echar flores y aporto lo que puedo...

No, más bien. Y lo único que falta es que empecés de nuevo a aportar "-1".

Cita:

Iniciado por zerokilled

...@furoya, fíjate la edición del tema inicial.

me tomé el atrevimiento de editar el mensaje inicial para poner el código entre bbocde [code][/code] porque estaba conciente de que algo así podía suceder. así que le facilite la oportunidad a que otros puedan leer el código y así obener una respuesta. nunca le hice mención de ese detalle, mis agradecimientos por tomarte la molestia.

Cómo nos conocés. Ya sabés adónde mandamos a los que publican código sin el correspondiente bbcode.
No vi la 'Razón para editar'. Por lo general no las veo, ni las firmas (para no amargarme con el spam). Pero debí suponerlo, porque en el link que dejé hiciste lo mismo.
ciurix te debe una.
Igual esto me vino bien para mencionar elipticamente a cierta persona que mete sus ejemplos en etiquetas quote. Así que el agradecido soy yo. (Aunque a ella no se los editás ...

)