19/11/2012, 15:19
|
| (Desactivado) | | Fecha de Ingreso: noviembre-2002 Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años 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>
|