Foros del Web » Programando para Internet » Javascript »

mostrar tabla al pulsar registro de uan tabla padre

Estas en el tema de mostrar tabla al pulsar registro de uan tabla padre en el foro de Javascript en Foros del Web. hola amigos os cuento lo que tengo: tengo una tabla generada dinamicamente con sectores, que al pulsar sobre un campo muestra subsectores con checkbox para ...
  #1 (permalink)  
Antiguo 31/08/2010, 21:01
 
Fecha de Ingreso: abril-2010
Ubicación: Extremadura
Mensajes: 128
Antigüedad: 14 años, 7 meses
Puntos: 2
mostrar tabla al pulsar registro de uan tabla padre

hola amigos os cuento lo que tengo:

tengo una tabla generada dinamicamente con sectores, que al pulsar sobre un campo muestra subsectores con checkbox para marcarlos, cada campo de la tabla es un div que tiene la opcion de abrirlo y cerrarlo para abrir el div con los subsectores

ahora el probema

cuando pulso encima de una de los sectores, el div de los subsectores me aparece encima de la tabla y mi intencion es que aparezca en l asigueinte linea sn que me desbarajuste la tabla

alguna idea??

os pongo el codigo de lo que hace

gracias




echo "<table border = '0'> \n";
do {
$id = $row["id_sector"]-1;


if ( $id%5==0 ){
echo "<tr>";
$count=0;
$count=$count+1;
echo "<td>";
}else{
echo "<td>";
}


echo "<th>";
echo "<div id=".$id." class=\"nosel\" onclick=\"ver(this.id)\" style=\"z-index:1;\">".htmlentities($row["nom_sector"])."</div>";
echo "</th>";
if ( ($id%5!=0) && ($count<5) ){
echo "</td>";
}
if($count==5){
echo "</tr>";
}

echo "<div id=\"sub".$id."\" class=\"ocultar\" style=\"z-index:1;\">";
//conusulta tabla subsectores (where =$id)
$result_sub = mysql_query("SELECT * FROM subsectores where id_sector=\"$row[id_sector]\" ", $link);


do{
$row_sub = is_resource($result_sub) ? mysql_num_rows($result_sub) : 0;
$row_sub= mysql_fetch_array($result_sub);
$num_rows_sub = mysql_num_rows($result_sub);
echo "<input name=\"check_sub[]\" id=\"check_sub\" type=\"checkbox\" value=".$row_sub["id_subsector"]." /><label>".htmlentities($row_sub["nom_subsector"])."</label>";

}while ($row_sub = mysql_fetch_array($result_sub));
echo "</div>";


} while ($row = mysql_fetch_array($result));
echo "</table>";
} while ($row = mysql_fetch_array($result)
  #2 (permalink)  
Antiguo 01/09/2010, 01:40
Avatar de geq
geq
 
Fecha de Ingreso: agosto-2006
Ubicación: Rosario
Mensajes: 655
Antigüedad: 18 años, 4 meses
Puntos: 22
Respuesta: mostrar tabla al pulsar registro de uan tabla padre

Hola,

Por lo que entiendo, tu problema es de CSS y no de php, busca ayuda en ese foro :)

Saludos!
  #3 (permalink)  
Antiguo 01/09/2010, 01:52
 
Fecha de Ingreso: agosto-2010
Ubicación: santiago, CHILE
Mensajes: 564
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: mostrar tabla al pulsar registro de uan tabla padre

/*....tu problema es de javascript y con manejo de los tags con el dom...porq debes calcular las posiciones...con los margenes del padre(navegador) y su hijo la etiqueta div que tambien tiene otros hijos y asi los vas posicionando...*/
  #4 (permalink)  
Antiguo 01/09/2010, 09:57
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años, 6 meses
Puntos: 2135
Tema movido desde PHP a Javascript
  #5 (permalink)  
Antiguo 01/09/2010, 12:20
 
Fecha de Ingreso: abril-2010
Ubicación: Extremadura
Mensajes: 128
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: mostrar tabla al pulsar registro de uan tabla padre

pues habe si la gente de javascript puede hecharme una mano no?????
  #6 (permalink)  
Antiguo 01/09/2010, 14:43
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: mostrar tabla al pulsar registro de uan tabla padre

Hola

Para poderte ayudar muéstranos el HTML que se genera, junto con la función ver()

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #7 (permalink)  
Antiguo 01/09/2010, 16:20
 
Fecha de Ingreso: abril-2010
Ubicación: Extremadura
Mensajes: 128
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: mostrar tabla al pulsar registro de uan tabla padre

aki te dejo como esta hecho ahora mismo arriba tienes la funcion ver, si kieres ver la base de tatos te mando una prueba, gracias

<!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>
<style type="text/css">
.ocultar {display:none;}
.mostrar {display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}
</style>
<script type="text/javascript">
var visto_subm = null;
var visto_color = null;
function ver(num) {
objhl = document.getElementById(num);
obj = document.getElementById("sub"+num);

obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';

if ((visto_subm != null) && (visto_color != null)) {
visto_subm.className = 'ocultar';
visto_color.className = 'nosel';
}

visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}

</script>
</head>
<body>

<div id="sectores">
<label class="subcabezeras">Actividad de la empresa</label>
<?php
$link = mysql_connect($host,$usuario,$password);
mysql_select_db($bd,$link) or die (mysql_error());
$result = mysql_query("SELECT * FROM sectores", $link);

$row = is_resource($result) ? mysql_num_rows($result) : 0;


$row = mysql_fetch_array($result);

$num_rows = mysql_num_rows($result);

echo "<table border = '0'> \n";
do {
$id = $row["id_sector"]-1;


if ( $id%5==0 ){
echo "<tr>";
$count=0;
$count=$count+1;
echo "<td>";
}else{
echo "<td>";
}


echo "<th>";
echo "<div id=".$id." class=\"nosel\" onclick=\"ver(this.id)\" style=\"z-index:1;\">".htmlentities($row["nom_sector"])."</div>";
echo "</th>";
if ( ($id%5!=0) && ($count<5) ){
echo "</td>";
}
if($count==5){
echo "</tr>";
}

echo "<div id=\"sub".$id."\" class=\"ocultar\" style=\"z-index:1;\">";
//conusulta tabla subsectores
$result_sub = mysql_query("SELECT * FROM subsectores where id_sector=\"$row[id_sector]\" ", $link);
do{
//$row_sub = is_resource($result_sub) ? mysql_num_rows($result_sub) : 0;
$row_sub= mysql_fetch_array($result_sub);
$num_rows_sub = mysql_num_rows($result_sub);
echo "<input name=\"check_sub[]\" id=\"check_sub\" type=\"checkbox\" value=".$row_sub["id_subsector"]." /><label>".htmlentities($row_sub["nom_subsector"])."</label>";
}while ($row_sub = mysql_fetch_array($result_sub));
echo "</div>";


} while ($row = mysql_fetch_array($result));
echo "</table>";
//mysql_free_result($result);
?>

</body>
</html>
  #8 (permalink)  
Antiguo 01/09/2010, 16:31
 
Fecha de Ingreso: abril-2010
Ubicación: Extremadura
Mensajes: 128
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: mostrar tabla al pulsar registro de uan tabla padre

y esto me genera firebug cuando pulso una de los campos y me aparece llos datos que quiero mostrar pero arriba, y no debajo de esa linea sin que destartale la taba por completo


html xmlns="http://www.w3.org/1999/xhtml"><head>



<style type="text/css">
.ocultar {display:none;}
.mostrar {display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}
</style>
<script type="text/javascript">
var visto_subm = null;
var visto_color = null;
function ver(num) {
objhl = document.getElementById(num);
obj = document.getElementById("sub"+num);

obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';

if ((visto_subm != null) &amp;&amp; (visto_color != null)) {
visto_subm.className = 'ocultar';
visto_color.className = 'nosel';
}

visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}

</script>
</head><body>

<div id="sectores">
<label class="subcabezeras">Actividad de la empresa</label>
<div style="z-index: 1;" class="mostar" id="sub0"><input type="checkbox" value="1" id="check_sub" name="check_sub[]"><label>Abastecimiento de agua</label><input type="checkbox" value="3" id="check_sub" name="check_sub[]"><label>Abono orgánico</label><input type="checkbox" value="5" id="check_sub" name="check_sub[]"><label>Aceite de oliva</label><input type="checkbox" value="7" id="check_sub" name="check_sub[]">
......................................mucho de esto repetio........................................
<type="checkbox" value="349" id="check_sub" name="check_sub[]"><label>Camiones grúa</label><input type="checkbox" value="351" id="check_sub" name="check_sub[]"><label>Carpintería pvc</label><input type="checkbox" value="353" id="check_sub" name="check_sub[]"><label>Casetas de obra</label><input type="checkbox" value="355" id="check_sub" name="check_sub[]"><label>Cerramientos metálicos</label><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub9"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub10"><input ></label></div><div style="z-index: 1;" class="ocultar" id="sub21"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub22"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub23"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub24"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub25"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub26"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub27"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub28"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub29"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub30"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub31"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub32"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label>type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><div style="z-index: 1;" class="ocultar" id="sub37"><input type="checkbox" value="/" id="check_sub" name="check_sub[]"><label></label></div><table border="0">
<tbody><tr><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="sel" id="0">Agricultura y Ganadería</div></th><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="1">Alimentación</div></th><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="2">Animales y mascotas</div></th><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="3">Arte</div></th><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="4">Asesorías y despachos</div></th></tr><tr><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="5">Bancos y cajas</div></th><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" i1;" onclick="ver(this.id)" class="nosel" id="19">Mantenimiento</div></th></tr><tr><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="20">Moda</div></th><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="21">Muebles</div></th><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" : 1;" onclick="ver(this.id)" class="nosel" id="27">Salud y medicina</div></th><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="28">Seguridad</div></th><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="29">Seguros</div></th></tr><tr><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" </td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="36">Vehículos</div></th><td></td><th><div style="z-index: 1;" onclick="ver(this.id)" class="nosel" id="37">Viajes</div></th></tr></tbody></table>





<!--

<div id="0" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU0</div>
<div id="sub0" class="ocultar" style="z-index:1;">
SubMenu0<br />
SubMenu0<br />
SubMenu0
</div>

<div id="1" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU1</div>
<div id="sub1" class="ocultar" style="z-index:1;">
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>


<div id="2" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU2</div>
<div id="sub2" class="ocultar" style="z-index:1;">
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>


<div id="3" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU3</div>
<div id="sub3" class="ocultar" style="z-index:1;">
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
-->
</div></body></html>
  #9 (permalink)  
Antiguo 02/09/2010, 05:44
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: mostrar tabla al pulsar registro de uan tabla padre

Hola

Imprime el HTML desde Ver ---> Código fuente de la página. De esta manera estará estructurado y no será todo un amasijo.
En principio parece que es un problema de posicionamiento que puedes solventar construyendo correctamente el HTML

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #10 (permalink)  
Antiguo 02/09/2010, 16:35
 
Fecha de Ingreso: abril-2010
Ubicación: Extremadura
Mensajes: 128
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: mostrar tabla al pulsar registro de uan tabla padre

el problema es k es una tabla dinamica con muchos registros, por eso es tan largo, si hay alguna forma de mostrartelo mejor dimela, pero esto de abajo es lo que me muestra haciendo lo que mas dicho, muchas gracias por tu paciencia

e tenido que recortar un poco por k eran mas de 45000 caracteres

aki tines la funcion ver() y el css:

</script>

<!-- /////////////////////////sectores///////////////////-->

<!--<style type="text/css">
.ocultar {display:none;}
.mostrar {display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}
</style>-->
<script type="text/javascript">
var visto_subm = null;
var visto_color = null;
function ver(num) {
objhl = document.getElementById(num);
obj = document.getElementById("sub"+num);

obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';

if ((visto_subm != null) && (visto_color != null)) {
visto_subm.className = 'ocultar';
visto_color.className = 'nosel';
}

visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}

</script>
y aki el trocito que pertenece a lo de los sectores, por que lo demas es unsimple formulario sin mas:

<div id="sectores">
<label class="subcabezeras">Actividad de la empresa</label>

<table border = '0'>
<tr><td><div id=0 class="nosel" onclick="ver(this.id)" style="z-index:1;">Agricultura y Ganader&iacute;a</div><div id="sub0" class="ocultar" style="z-index:1;"><input name="check_sub[]" id="check_sub" type="checkbox" value=1 /><label>Abastecimiento de agua</label><input name="check_sub[]" id="check_sub" type="checkbox" value=2 /><label>Abonado de tierra</label><input name="check_sub[]" id="check_sub" type="checkbox" value=3 /><label>Abono org&aacute;nico</label><input name="check_sub[]" id="check_sub" type="checkbox" value=4 /><label>Aceite de girasol</label><input name="check_sub[]" id="check_sub" type="checkbox" value=5 /><label>Aceite de oliva</label><input name="check_sub[]" id="check_sub" type="checkbox" value=6 /><label>Aceite industrial</label><input name="check_sub[]" id="check_sub" type="checkbox" value=7 /><label>Aglomerado asf&aacute;ltico</label><input name="check_sub[]" id="check_sub" type="checkbox" value=8 /><label>Alfalfa</label><input name="check_sub[]" id="check_sub" type="checkbox" value=9 /><label>Alimento para ganado</label><input name="check_sub[]" id="check_sub" type="checkbox" value=10 /><label>&Aacute;rboles</label><input name="check_sub[]" id="check_sub" type="checkbox" value=11 /><label>Arboricultura</label><input name="check_sub[]" id="check_sub" type="checkbox" value=12 /><label>Asesoramiento agr&iacute;cola</label><input name="check_sub[]" id="check_sub" type="checkbox" value=13 /><label>Aceites</label></table></div>

<div id="imagenes">

Etiquetas: padre, pulsar, registro, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:08.