Ver Mensaje Individual
  #13 (permalink)  
Antiguo 19/11/2012, 15:19
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: cambiar de color a celda en varios radio button

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>