duda casillas de verificaci贸n
tricky22
14 de Marzo del 2006
Hola, q tal?!vereis. Tengo un men煤 de pesta帽as (horizontal) y cada pesta帽a tengo unos submen煤s donde hay unas cuantas opciones con su correspondiente casilla de verificaci贸n a su izquierda. El caso es que quiero hacer que cuando vaya seleccionando cada una de las opciones que hay, me vayan apareciendo en un frame vertical que tendr茅 a la izquierda, o en una textarea o lo que sea. Como lo puedo hacer??Quiz谩 tendr铆a que haber puesto este mensaje en el foro de javascript?!Muchas gracias.
Un saludo,
Tricky.
Un saludo,
Tricky.
tricky22
14 de Marzo del 2006
Al final lo conseguido!!. Me ha sido muy util este link http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/getelementbyid.asp
<html>
<head>
<title>prova</title>
<script language="JavaScript">
var lista = new Array(50)
var cont = 1
function carga(nombre,valor,id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
if (valor){
lista[cont] = nombre
td1.appendChild(document.createTextNode(lista[cont]))
row.appendChild(td1);
tbody.appendChild(row);
cont ++
}else{
for(var i=1;i<cont;i++){
if (lista[i]==nombre){
tbody.deleteRow(i);
for (var j=i;j<=cont;j++) lista[j]=lista[j+1]
}
}
cont--
}
}
</script>
</head>
<body bgcolor="#CC0099">
<form name="form1" method="post" action="">
<div align="center">
<table width="100%" height="323" border="0" cellspacing="0">
<tr>
<td width="44%" valign="top">
<div align="center">
<table width="133" border="2" cellspacing="0" bgcolor="#FFFFFF" bordercolor="#000000" bordercolordark="#999999">
<tr>
<td><div align="center"><strong>OPCIONES</strong></div></td>
</tr>
<tr>
<td height="299" valign="top" align="center">
<table id="tabla_atributos" width="120" cellspacing="0" border="0">
<tbody>
<tr>
<td height="1"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div></td>
<td width="56%" valign="top">
<p> </p><table border="1" cellspacing="0" bordercolor="#000000">
<tr>
<td> <input name="opcion1" type="checkbox" onClick="javascript:carga('opcion1',opcion1.checked,'tabla_atributos')">
Opción 1</td>
<td> <input type="checkbox" name="opcion2" onClick="javascript:carga('opcion2',opcion2.checked,'tabla_atributos')">
Opción 2</td>
<td> <input type="checkbox" name="opcion3" onClick="javascript:carga('opcion3',opcion3.checked,'tabla_atributos')">
Opción 3</td>
<td> <input type="checkbox" name="opcion4" onClick="javascript:carga('opcion4',opcion4.checked,'tabla_atributos')">
Opción 4</td>
</tr>
<tr>
<td> <input type="checkbox" name="opcion5" onClick="javascript:carga('opcion5',opcion5.checked,'tabla_atributos')">
Opción 5</td>
<td><input type="checkbox" name="opcion6" onClick="javascript:carga('opcion6',opcion6.checked,'tabla_atributos')">
Opción 6</td>
<td><input type="checkbox" name="opcion7" onClick="javascript:carga('opcion7',opcion7.checked,'tabla_atributos')">
Opción 7</td>
<td><input type="checkbox" name="opcion8" onClick="javascript:carga('opcion8',opcion8.checked,'tabla_atributos')">
Opción 8</td>
</tr>
</table></td>
</tr>
</table>
</div>
</form>
</body>
</html>
TRICKY
<html>
<head>
<title>prova</title>
<script language="JavaScript">
var lista = new Array(50)
var cont = 1
function carga(nombre,valor,id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
if (valor){
lista[cont] = nombre
td1.appendChild(document.createTextNode(lista[cont]))
row.appendChild(td1);
tbody.appendChild(row);
cont ++
}else{
for(var i=1;i<cont;i++){
if (lista[i]==nombre){
tbody.deleteRow(i);
for (var j=i;j<=cont;j++) lista[j]=lista[j+1]
}
}
cont--
}
}
</script>
</head>
<body bgcolor="#CC0099">
<form name="form1" method="post" action="">
<div align="center">
<table width="100%" height="323" border="0" cellspacing="0">
<tr>
<td width="44%" valign="top">
<div align="center">
<table width="133" border="2" cellspacing="0" bgcolor="#FFFFFF" bordercolor="#000000" bordercolordark="#999999">
<tr>
<td><div align="center"><strong>OPCIONES</strong></div></td>
</tr>
<tr>
<td height="299" valign="top" align="center">
<table id="tabla_atributos" width="120" cellspacing="0" border="0">
<tbody>
<tr>
<td height="1"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div></td>
<td width="56%" valign="top">
<p> </p><table border="1" cellspacing="0" bordercolor="#000000">
<tr>
<td> <input name="opcion1" type="checkbox" onClick="javascript:carga('opcion1',opcion1.checked,'tabla_atributos')">
Opción 1</td>
<td> <input type="checkbox" name="opcion2" onClick="javascript:carga('opcion2',opcion2.checked,'tabla_atributos')">
Opción 2</td>
<td> <input type="checkbox" name="opcion3" onClick="javascript:carga('opcion3',opcion3.checked,'tabla_atributos')">
Opción 3</td>
<td> <input type="checkbox" name="opcion4" onClick="javascript:carga('opcion4',opcion4.checked,'tabla_atributos')">
Opción 4</td>
</tr>
<tr>
<td> <input type="checkbox" name="opcion5" onClick="javascript:carga('opcion5',opcion5.checked,'tabla_atributos')">
Opción 5</td>
<td><input type="checkbox" name="opcion6" onClick="javascript:carga('opcion6',opcion6.checked,'tabla_atributos')">
Opción 6</td>
<td><input type="checkbox" name="opcion7" onClick="javascript:carga('opcion7',opcion7.checked,'tabla_atributos')">
Opción 7</td>
<td><input type="checkbox" name="opcion8" onClick="javascript:carga('opcion8',opcion8.checked,'tabla_atributos')">
Opción 8</td>
</tr>
</table></td>
</tr>
</table>
</div>
</form>
</body>
</html>
TRICKY