[AYUDA]Problema ocultar/mostrar celda de una tabla sin que se descoloque el contenido

[hosyou]

Buenaas, soy nuevo por aqui, sin embargo llevo consultando este foro bastante tiempo ya, asi que saludos!

Tengo el siguiente problema, quiero hacer una tabla en html que muestre en cada fila unos datos determinados, y además un botón para mostrar/ocultar una segunda fila debajo de esta, que contenga más informacion.

El código es el siguiente:

Esta es la cabecera de la tabla:

Código HTML:

<TABLE border='1px'>
    <TR bgcolor='silver'>
        <TH align='center' width='100'>N&deg Id</TH>
        <TH align='center' width='100'>DNI</TH>
        <TH align='center'>Nombre</TH>
        <TH align='center'>E-mail</TH>
        <TH align='center'></TH> 
    </TR> 

Esto se repite tantas veces como sea necesario para ir contruyendo cada fila.

Código HTML:

 <TR>
            <TD align='center'>ID_1</TD>
            <TD align='center'>DNI_1</TD>
            <TD>Nombre_1</TD>
            <TD>Email_1</TD>
            <TD>
                <BUTTON href='#' onclick='JavaScript:ShowHide("1111")'>Ver Grupos</BUTTON>
            </TD>
        </TR> 
        
        <TR id='1111' style='display:none'>
            <TD align='center' colspan='5'> <!-- CELDA CRITICA! -->
                <TABLE border='1'>
                    <TR>
                        <TH align='center' colspan='4'>TABLA 2</TD>
                    </TR>
                    <TR>
                        <TD align='center'>ASDAD</TD>
                        <TD align='center'>ASDAD</TD>
                        <TD align='center'>ASDAD</TD>
                        <TD align='center'>ASDAD</TD>
                    </TR>
                
                </TABLE>
            </TD>
        </TR> 

Como se puede observar, el boton "Ver Grupos", en la quinta celda de la primera fila, muestra/oculta la fila de abajo, haciendo referencia a la misma a través del id='1111'.

Por otro lado, tenemos que la segunda tabla (TABLA 2) está centrada dentro de una celda de la segunda fila de la tabla principal. La celda en cuestión es la "CELDA CRITICA"

Hasta ahi bien, las dos cosas funciona perfectamente, por separado. En cuanto junto las dos cosas la "celda critica" actua como si tuveira un colspan="1", por lo que se queda a la izquierda de la tabla alineada con la primera columna y todo se desajusta.

He probado a poner el "id='1111' style='display:none'", tanto en la fila, como en la celda, como en la tabla. Si lo pongo en la fila o en la celda pasa lo que he descrito. Si lo pongo en la tabla, la celda respeta el colspan, pero las celdas de la tabla se alinean a la izquierda del todo de la "celda critica", aunque se haya especificado la propiedad align="center".

Por lo que he podido comprobar el problema está al tocar la el atributo display de la propiedad style. En cuanto se toca el atributo para configurar el ShowHide, la celda se descoloca, si no se toca dicha propiedad entonces las tablas se muestran bien, pero claro se muestran todas, ya no funciona el showhide.

La funcion ShowHide que estoy utilizando es la predeterminada, no estoy usando ninguna funcion javascript personalizada.

En fin, no se que hacer, estoy pensando en buscar otro formato para presentar los datos, pero me gustaría saber si alguien tiene alguna solucion.

Muchas gracias por adelantado y un salduo!

[juanito1712]

no se cual sera la funcion showhide predeterminada pero esta va de lujo ;)
function ShowHide(xd){
if(document.getElementById(xd).style.display==""){
document.getElementById(xd).style.display="none";
}else{
document.getElementById(xd).style.display="";
}
}

[hosyou]

Realmente el problema no es la funcion ShowHide, la que tengo yo tambien funciona bien, es que cuando se oculta la celda que quiero ocultar, el contenido de la misma se descoloca y al volver a mostrarlo ya se queda mal.

[furoya]

Lo más seguro es que sea la función ShowHide, que no modifica como debe los atributos o propiedades de la fila (como el display). Pero hay que verla.

Ya estamos un poco hartos de explicar esto, pero te lo repito : poné un ejemplo que podamos probar, algo que lo copie, lo pegue en un editor, lo guarde y lo abra en un navegador. Se tiene que ver claramente como aparece y desaparece esa celda con su botón.
Nada elaborado, un ejemplo básico y ceñido a tu problema; lo que sobra (como una cantidad absurda de filas), lo sacás.

Por otro lado ¿realmente se justifica que estés anidando tablas en celdas? ¿te las tira así un programa en el servidor, y no tenés manera de arreglarlo?.

Por último, si esa función "predeterminada" (¿?) es JQuery, vas a tener que pedir el traslado al foro de Frameworks, si es JS se podría ver acá primero y después se mueve.

[emprear]

Edito:
Esta vez me madrugaste voz @furoya

@hosyou :

Por favor cuando hagas este tipo de preguntas, poné todo el código completo y no fragmentado.
Tu html está bastante sucio, y los id no pueden ser ni comenzar por un número. Asi y todo entiendo el problema (que no se da en IE), una posible solución, si es que la estructura se repite es

Código HTML:

<!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>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function ShowHide(fila) {
 if ((document.getElementById(fila).style.display) == 'block') {
  document.getElementById(fila).style.display = 'none';
 }
 else {
  document.getElementById(fila).style.display = 'block';
 }
}
//]]>
</script>
</head>
<body>
<table border='1' style="border-collapse:separate;empty-cells:hide;">
<tr bgcolor='silver'>
<th align='center' width='100'>N° Id</th>
<th align='center' width='100'>DNI</th>
<th align='center'>Nombre</th>
<th align='center'>E-mail</th>
<th align='center'>&nbsp;</th>
</tr>
 
<tr>
<td align='center'>ID_1</td>
<td align='center'>DNI_1</td>
<td>Nombre_1</td>
<td>Email_1</td>
<td><button onclick='ShowHide("a1111")'>Ver Grupos</button></td>
</tr>
<tr>
<td align='center' colspan='5'>
<table border='1' align="center" style="display: none;"  id='a1111' >
<tr>
<th align='center' colspan='4'>TABLA 2</th>
</tr>
<tr>
<td align='center'>ASDAD</td>
<td align='center'>ASDAD</td>
<td align='center'>ASDAD</td>
<td align='center'>ASDAD</td>
</tr>
</table>
</td>
</tr>
 
<tr>
<td align='center'>ID_2</td>
<td align='center'>DNI_2</td>
<td>Nombre_2</td>
<td>Email_2</td>
<td><button onclick='ShowHide("a1112")'>Ver Grupos</button></td>
</tr>
<tr>
<td align='center' colspan='5'>
<table border='1' align="center" style="display: none;"  id='a1112' >
<tr>
<th align='center' colspan='4'>TABLA 3</th>
</tr>
<tr>
<td align='center'>ASDAD</td>
<td align='center'>ASDAD</td>
<td align='center'>ASDAD</td>
<td align='center'>ASDAD</td>
</tr>
</table>
</td>
</tr>
 
 
</table>
</body>
</html>
 

Saludos

[furoya]

Perdón. Nos tenemos que poner de acuerdo para postear.

Yo pensba, además, que podría usar table-row o table-row-group para hacer visible esa parte de la tabla.

No le quise decir nada por los errores de JS y HTML, porque me amargaba la mañana.

Recién le posteo a otro que se "olvidó" de decir que tenía un reset CSS y pretendía que lo adivináramos.

Los domingos están peor que de costumbre...

[emprear]

Iniciado por furoya

Perdón. Nos tenemos que poner de acuerdo para postear.

Yo pensba, además, que podría usar table-row o table-row-group para hacer visible esa parte de la tabla.

No le quise decir nada por los errores de JS y HTML, porque me amargaba la mañana.

Recién le posteo a otro que se "olvidó" de decir que tenía un reset CSS y pretendía que lo adivináramos.

Los domingos están peor que de costumbre...

Usted está en todas maestro.

Igual me parece que algo anda mal en esto, hice esta versión mejorada

Código HTML:

<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
 
<style type="text/css">
/*<![CDATA[*/
 
#a1, #a2{
display: none;
margin: 0;
}
 
table#principal{
empty-cells: hide;
border-collapse: separate;
}
 
button{
width: 90%;
}
 
td.np{
padding: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function ShowHide(rowId,b) {
 if ((document.getElementById(rowId).style.display) == 'block') {
  document.getElementById(rowId).style.display = 'none';
 b.innerHTML = 'Ver Grupos';
 }
 else {
  document.getElementById(rowId).style.display = 'block';
  b.innerHTML = 'Ocultar Grupos';
 }
}
//]]>
</script>
</head>
 
<body>
<table width="50%" border="1" cellspacing="1" cellpadding="2" id="principal">
  <tr bgcolor="#999966">
    <th align="center">ID</th>
    <th align="center">DNI</th>
    <th align="center">Nombre</th>
    <th align="center">Email</th>
    <th align="center">&nbsp;</th>
  </tr>
  <tr>
    <td align="center">id1</td>
    <td align="center">dni1</td>
    <td align="center">Nombre_1</td>
    <td align="center">Email_1</td>
    <td align="center"><button onclick="ShowHide('a1',this)">Ver Grupos</button></td>
  </tr>
  <tr>
    <td colspan="5" align="center" class="np">
        <table border="1" cellpadding="2" cellspacing="1" id="a1">
      <tr>
        <th colspan="4">TABLA 1 </th>
        </tr>
      <tr>
        <td>ASDAD</td>
        <td>ASDAD</td>
        <td>ASDAD</td>
        <td>ASDAD</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center">id2</td>
    <td align="center">dni2</td>
    <td align="center">Nombre_2</td>
    <td align="center">Email_2</td>
    <td align="center"><button onclick="ShowHide('a2',this)">Ver Grupos</button></td>
  </tr>
  <tr align="center">
    <td colspan="5" class="np">
        <table border="1" cellpadding="2" cellspacing="1" id="a2">
      <tr>
        <th colspan="4">TABLA 1 </th>
      </tr>
      <tr>
        <td>ASDAD</td>
        <td>ASDAD</td>
        <td>ASDAD</td>
        <td>ASDAD</td>
      </tr>
    </table></td>
  </tr>
</table>
 
</body>
</html>
 

y en chrome sigue el problema, se pierde el centrado de la tabla que se oculta/muestra
Cre oque es cosa de empezarla de 0 y buscar otro camino

SAludos

[emprear]

Agrego, que se olvide, vaya y pase, ¿pero que no nos lo diga a nosotros?
Estamos dibujados

[furoya]

Uff. Ya me tienen podrido. Son una manga de irrespetusos. Y lo peor que después son ellos los que se hacen los ofendidos. El otro día comentaba qué suerte tienen de que yo nunca pueda ser moderador en este sitio. Porque los baneaba a todos por maleducados.


Y volviendo al código, sí, no anda bien. Tiene que ver con eso que comentaba.
Los escripts de tienen que ajustarse al estilo de destino. En este caso sería.

Código:

function ShowHide(rowId,b) {
 if ((document.getElementById(rowId).style.display) == 'table') {
  document.getElementById(rowId).style.display = 'none';
 b.innerHTML = 'Ver Grupos';
 }
 else {
  document.getElementById(rowId).style.display = 'table';
  b.innerHTML = 'Ocultar Grupos';
 }
}

(Se le pasó ese detalle, maestro. Y seguro que a hosyou -que todavía ni apareció- , también.)

[emprear]

Cosa e mandinga.
No se me pasó, jamás se me hubiera ocurrido restaurar la visibilidad con 'table' cuando la tabla debe comportarse como tal
Ves @furoya, hasta de una 'falta de respeto' se aprende algo nuevo, este foro es impagable

Saludos

[juanito1712]

Respuesta: [AYUDA]Problema ocultar/mostrar celda de una tabla sin que se descoloque e

Realmente el problema no es la funcion ShowHide, la que tengo yo tambien funciona bien, es que cuando se oculta la celda que quiero ocultar, el contenido de la misma se descoloca y al volver a mostrarlo ya se queda mal.

Estas diciendo que el problema no es la funcion, pero que al ocultar te destroza lo que tienes, a mi parecer eso no es funcionar correctamente y yo te estoy diciendo que con el html que has dado la funcion que te he dado funciona perfectamente, no entiendo que problema hay

[furoya]

Sí, tu función anda porque estás haciendo un document.getElementById(xd).style.display="";, que devuelve el display a su modo original, sea cual éste fuere.

A mí me están empezando a hartar soberanamente las paciencias los caprichosos que vienen a pedir pero no son capaces de poner un ejemplo. O peor, que tiran partes de código "y no entienden" por qué con eso no alcanza. Que tampoco es una cuestión de entender, es una cuestión de respeto por la gente que quiere ayudar.

Iniciado por emprear

Ves @furoya, hasta de una 'falta de respeto' se aprende algo nuevo, este foro es impagable

Vamos a ser sinceros, emprear, a este Foro lo hacemos impagable los que venimos a colaborar (digo, inmodestamente como siempre) .

Porque yo lo visito para leer mensajes como los tuyos; si fuera solamente por los que vienen a rapiñar código y discutir lo indiscutible, ni aparezco.

[hosyou]

Buenas a todos y muchisimas gracias por las respuestas. Siento la falta de información, estoy algo verde, pero no volverá a pasar. Una vez mas muchas gracias por ayudarme.

Al final el problema era precisamente en la función ShowHide, que no la encontraba por eso puse lo de la "funcion predeterminada de javascript". El código completo no es mio, yo debo revisarlo y mejorarlo, y algunas cosas se me habian pasado... u^^

En efecto puse que la funcion estaba funcionando (valga la redundancia) bien, porque pensaba que sólo ocultaba/mostraba la celda, pero precisamente era la que lo jodia todo.
Para ocultar la celda se modificaba el display asi:

Código:

document.getElementById(id).style.display="none"

Pero para mostrarla lo hacía de la siguiente forma

Código:

document.getElementById(id).style.display="block"

Y la forma que yo necesitaba era esta:

Código:

document.getElementById(id).style.display=""

Todavía no estoy seguro de la diferencia aunque como bien ha dicho furoya, se debe a la linea document.getElementById(xd).style.display="";

Pero no se qué hace el document.getElementById(xd).style.display="block";, para que se trastocara la colocacion de la celda.

Una vez más lamento que el planteamiento de mi problema haya sido tan precario, entiendo que aqui se resuelven muchos problemas y que sin un adecuado planteamiento es dificil. Muchas gracias por contestar y por ayudarme

[furoya]

La ventaja que tiene la falta de información para resolver un problema, es que después vamos al Colegio Hogwarts y nos regalan el diploma.


La explicación es simple, la mencionamos más arriba : la tabla se comporta como tabla, porque tiene por default un display:table; si se lo cambiás con
document.getElementById(id).style.display="block" se comporta como un bloque cualquiera, le estás modificando la forma en que se ve naturalmente.

El ejemplo de juanito1712 es medio una chanchada, porque con document.getElementById(id).style.display="" lo que hacés es vaciarle el valor, pero así te asegurás que el navegador lo rellene por las suyas, y siempre va a usar el que le corresponda a ese elemento.

[juanito1712]

uy chanchada, mala persona ¬_¬

con lo bien que funciona alternar entre "none" y "" que aun no lo he visto fallarme

y ahora... ¿que puñetas es una chanchada?XD