Al cargar página celdas de tabla no desaparecen

0le0 · #1 (**permalink**) 26/11/2008, 14:01

Jeje ahora tengo un problema con una tabla y algo acerca de la etiqueta

Código:

display:none

Y tengo el sig. código pero al cargar la página no quiero que se vean las celdas vacías que se activan al hacer click en el botón "Elegir opción" sino hasta que se realice la acción.

Código:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script>
function show_hide(grupoBotones){
switch(grupoBotones)
{
case 'radiob':
		if(document.getElementById('op1').checked){
		
		document.getElementById('select1').style.display = "none";
		document.getElementById('programa').style.display = "none"
		}
		else
		if(document.getElementById('op2').checked){
		document.getElementById('select1').style.visibility = "visible";
		document.getElementById('select1').style.display = "block";
		document.getElementById('programa').style.display = "block"
		}
		break;
case 'radioc':
		if(document.getElementById('op1c').checked){
		
		document.getElementById('cicloA').style.display = "none";
		document.getElementById('colCiclo').style.display = "none"
		}
		else
		if(document.getElementById('op2c').checked){
		document.getElementById('cicloA').style.visibility = "visible";
		document.getElementById('cicloA').style.display = "block";
		document.getElementById('colCiclo').style.display = "block"
		}
		break;
		}
}


</script>

</head>

<body>
<form name="myform" onsubmit="return validarCiclo(this.form);"  >
<table border="1">
<tr>
<td>Situación</td>
<td><select name="situacion" size="1" id="situacion" disabled >
   <option value="ALTA">ALTA</option>; 
   </select>
<tr>
<td>Programa
<td><input type="radio" name="radiob" id="op1" value="Por definir" onclick="show_hide(name,id)" />Por definir
<td><input type="radio"  name="radiob" id="op2" onclick="show_hide(name,id)" />Elegir opción
<td id="programa" display:none><select name="select1" id="select1" size="1" style="visibility:hidden" >
<option value="1">MEE</option>
<option value="2">INIFED</option>
</select>  
<tr>
<td>Ciclo de Atención
<td><input type="radio" name="radioc" id="op1c" value="Por definir" onclick="show_hide(name,id)" />
Por definir
<td><input type="radio"  name="radioc" id="op2c" onclick="show_hide(name,id)">Elegir opción
<td id="colCiclo" display:none ><select name="cicloA"  id="cicloA" size="1" style="visibility:hidden" >
   <option value="0">Por definir</option>
   <option value="1">2008-2009</option>
   <option value="2">2009-2010</option>
   <option value="3">2010-2011</option>
   <option value="4">2011-2012</option>
   </select></td>
</tr>

</body>

Para que no tengan que abrir su editorde html, solo copy/paste en este link
http://htmledit.squarefree.com/

Pasa en FF y en IE, alguien sabe que hacer??

0le0 · #2 (**permalink**) 27/11/2008, 15:35

bump

Aún no he podido solucionarlo!!!

0le0 · #3 (**permalink**) 01/12/2008, 09:59

Y si uso esta:visibility:hidden??
Lo que he leído es que el display:none oculta el elemento al que se le aplique y el visibility se usa para... ¿ocultar los elementos también?

No entiendo.

Lo que quiero hacer es como una tabla dinámica.

0le0 · #4 (**permalink**) 01/12/2008, 15:07

Para el que lo necesite, aquí esta la solución :

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script>
var control = [false,false,false,false,false,false,false];
alert(control);
function validarForm(formulario){
alert(control);
var d=0;
	for(var x=0;x<control.length;x++)
	{
		
		if(control[x] == false)
			{
				d++;
			}
	}
		
		if(d == 7)
		
			
				return true;
			else 
				return false;
			
	
}

function validarVacio(numero,idCampo,numeroForm){

alert(control);
if(numeroForm == 9) 
	{
		if(document.myform.elements[numeroForm].value == "" )
		control[2] = true;
		else
		control[2] = false;
	alert(control);
	}
if(numeroForm == 12)
{
 	if(document.myform.elements[numeroForm].value == "" )
		control[3] = true;
		else
		control[3] = false;
	alert(control);
}

if(numeroForm == 18)
{
 	if(document.myform.elements[numeroForm].value == "" )
		control[5] = true;
		else
		control[5] = false;
	alert(control);
}

if(numeroForm == 21)
{
 	if(document.myform.elements[numeroForm].value == "" )
		control[6] = true;
		else
		control[6] = false;
	alert(control);
}			
	
}

function solonumeros(e)
{
var key;
if(window.event) // IE
 {
  key = e.keyCode;
 }
  else if(e.which) // Netscape/Firefox/Opera
 {
  key = e.which;
 }
// NOTE: Backspace = 8, Enter = 13, '0' = 48, '9' = 57 
 if (key == 8 || key >= 48 && key <= 57)
    {
      return true;
    }

 return false;
}


function show_hide2(activarCampo) {

if(document.getElementById('check_sh1').checked) {
//document.getElementById('select_sh1').style.display = "block";
document.getElementById('select_sh2').style.display = "none";

} else {

document.getElementById('select_sh2').style.visibility = "visible";
document.getElementById('select_sh2').style.display = "block";

}
}

function show_hide(grupoBotones){
switch(grupoBotones)
{
case 'radiob':
		if(document.getElementById('op1').checked){
		
		document.getElementById('select1').style.display = "none";
		document.getElementById('programa').style.display = "none"
		
		}
		else
		if(document.getElementById('op2').checked){
		document.getElementById('select1').style.visibility = "visible";
		document.getElementById('select1').style.display = "block";
		document.getElementById('programa').style.display = "block"
		
		}
		break;
case 'radioc':
		if(document.getElementById('op1c').checked){
		
		document.getElementById('cicloA').style.display = "none";
		document.getElementById('colCiclo').style.display = "none"
		}
		else
		if(document.getElementById('op2c').checked){
		document.getElementById('cicloA').style.visibility = "visible";
		document.getElementById('cicloA').style.display = "block";
		document.getElementById('colCiclo').style.display = "block"
		}
		break;
		
case 'radiod':
		if(document.getElementById('op1d').checked){
		
		document.getElementById('presupuesto').style.display = "none";
		document.getElementById('colPres').style.display = "none"
		}
		else
		if(document.getElementById('op2d').checked){
		document.getElementById('presupuesto').style.visibility = "visible";
		document.getElementById('presupuesto').style.display = "block";
		document.getElementById('colPres').style.display = "block"
		document.getElementById('presupuesto').focus();
		}
		break;
		

}

</script>
</head>

<body>

<form name="myform" onsubmit="return validarForm(this.form);"  >
<table border="1">
<tr>
<td>Situación</td>
<td><select name="situacion" size="1" id="situacion" disabled >
   <option value="ALTA">ALTA</option>; 
   </select>
<tr>
<td>Programa
<td><input type="radio" name="radiob" id="op1" value="Por definir" onclick="show_hide(name,id)" />Por definir
<td><input type="radio"  name="radiob" id="op2" onclick="show_hide(name,id)" />Elegir opción
<td id="programa" style="display:none"><select name="select1" id="select1" size="1" style="visibility:hidden" >
<option value="1">MEE</option>
<option value="2">INIFED</option>
</select>  
<tr>
<td>Ciclo de Atención
<td><input type="radio" name="radioc" id="op1c" value="Por definir" onclick="show_hide(name,id)" />
Por definir
<td><input type="radio"  name="radioc" id="op2c" onclick="show_hide(name,id)">Elegir opción
<td id="colCiclo" style="display:none" ><select name="cicloA"  id="cicloA" size="1" style="visibility:hidden" >
   <option value="1">2008-2009</option>
   <option value="2">2009-2010</option>
   <option value="3">2010-2011</option>
   <option value="4">2011-2012</option>
   </select></td>
</tr>


<tr>
<td colspan="3" align="center"><input type="submit" name="Enviar" value="Enviar datos">
<input type="reset" name="Cancelar" value="Cancelar"></tr>
</table>
</form>
</body>
</html>