Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Ocultar y mostrar filas de una tabla

 Estas en el tema de Ocultar y mostrar filas de una tabla en el foro de HTML en Foros del Web. Que tal muchachos. Intento ocultar y mostrar filas de una tabla, el codido que tengo para adaptarlo es este: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ...
  #1 (permalink)  
Antiguo 22/01/2013, 11:11
 
Fecha de Ingreso: enero-2013
Mensajes: 3
Antigüedad: 11 años, 3 meses
Puntos: 0
Pregunta Ocultar y mostrar filas de una tabla
Que tal muchachos. Intento ocultar y mostrar filas de una tabla, el codido que tengo para adaptarlo es este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Mostrar/ocultar filas y columnas</title>

<script type="text/javascript">
<!--
function cambiarDisplay(id) {
if (!document.getElementById) return false;
fila = document.getElementById(id);

if (fila.style.display != "none") {
fila.style.display = "none"; //ocultar fila
} else {
fila.style.display = ""; //mostrar fila
}

}
-->
</script>
</head>
<body>

<table>
<tr id="row1" onClick="cambiarDisplay('row2')">
<td><strong><a href="#"> Ir a admisiones </a></strong> </td>
</tr>
<tr id="row2" style="display:none">
<td> <a href="http://admisiones.univalle.edu.co/new/index.php"> Admisiones Univalle</a></td>
</tr>

<tr id="row3" onClick="cambiarDisplay('row4'),cambiarDisplay('ro w2')">
<td><strong><a href="#"> Proceso de Inscripción </a></strong> </td>
</tr>

<tr id="row4" style="display:none">
<td> <a href="http://admisiones.univalle.edu.co/new/index.php"> Iniciar inscrpción</a></td>
</tr>

</table>

</body>
</html>


Funciona, pero la idea es que la función solo me permita desplegar una fila, es decir, si abro la segunda, por ejemplo, se oculte la primera y viceversa (Igual en el caso de que tuviera muchas mas filas).

Gracias ;)
  #2 (permalink)  
Antiguo 22/01/2013, 20:28
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Ocultar y mostrar filas de una tabla
A ver, es algo confuso lo que intentás

Hacer esto tiene su lógica
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>mostrar oculta capas</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. p{
  10. font-weight: bold;
  11. font-size: 11pt;
  12. width: 180px;
  13. cursor: pointer;
  14. font-family: arial, serif;
  15. padding: 5px;
  16. border: dotted 1px #554F9D;
  17. margin-bottom: 2px;
  18. margin-top: 3px;
  19. background-color:white;
  20. }
  21. #Uno,#Dos,#Tres{
  22. display: none;
  23. width: 180px;
  24. font-family: arial, serif;
  25. padding: 15px 5px;
  26. border: dotted 1px #554F9D;
  27. background-color:#A3AD76;
  28. font-size: 10pt;
  29. margin-top: 3px;
  30. margin-bottom:20px;
  31. }
  32. /*]]>*/
  33. </style>
  34. <script type="text/javascript">
  35. //<![CDATA[
  36. function contenido(cual){
  37. var capas = new Array("Uno", "Dos", "Tres");
  38. for(var i in capas){
  39. var e = document.getElementById(capas[i]);
  40. capas[i] == cual?e.style.display='block':e.style.display='none';        
  41. }
  42. }
  43. //]]>
  44. </script>
  45. </head>
  46. <body>
  47. <p onclick="contenido('Uno')" >uno</p>
  48. <div id="Uno">Texto uno</div>
  49. <p onclick="contenido('Dos')" >dos</p>
  50. <div id="Dos">Texto dos</div>
  51. <p onclick="contenido('Tres')" >tres</p>
  52. <div id="Tres">Texto tres</div>
  53. </body>
  54. </html>

Pero a esto, ocultar la que se clickea y mostrar las restantes, asumiendo que por defecto la fila uno está visible, no le encuentro mucha lógica, salvo que sean solo 2 filas
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Html5</title>
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. tr td{
  9. border-bottom: solid 1px #000;
  10. width: 300px;
  11. }
  12. tr.oculta{
  13. display: none;
  14. }
  15. /*]]>*/
  16. </style>
  17. <script type="text/javascript">
  18. //<![CDATA[
  19. /* script */
  20. function ver(cual){
  21. var tabla = document.getElementById('tabla_uno');
  22. var filas = new Array();
  23. filas = tabla.getElementsByTagName('tr');
  24. for (i=0; i<filas.length; i++) {
  25. if(filas[i].id == cual){
  26. filas[i].style.display = 'none';
  27. }else{
  28. filas[i].style.display = 'block';
  29. }
  30. }
  31. }
  32. //]]>
  33. </script>
  34. </head>
  35. <body>
  36. <table>
  37. <tbody  id="tabla_uno">
  38. <tr id="uno" onclick="ver(this.id);"><td>fila uno</td></tr>
  39. <tr class="oculta" id="dos" onclick="ver(this.id);"><td>fila dos</td></tr>
  40. <tr class="oculta" id="tres" onclick="ver(this.id);"><td>fila tres</td></tr>
  41. <tr class="oculta" id="cuatro" onclick="ver(this.id);"><td>fila cuatro</td></tr>
  42. <tr class="oculta" id="cinco" onclick="ver(this.id);"><td>fila cinco</td></tr>
  43. </tbody>
  44. </table>
  45. </body>
  46. </html>

A lo mejor en el conjunto de tu aplicación tiene más sentido
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 23/01/2013, 14:30
 
Fecha de Ingreso: enero-2013
Mensajes: 3
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Ocultar y mostrar filas de una tabla
Hey! Gracias, me diste una idea de como solucionarlo con el primer código que adjuntaste, esto era lo que quería hacer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Mostrar/ocultar filas y columnas</title>

<style>
/* clase para ocultar el div al inicio */

.oculto {
display:none;
margin-left:2em;
margin-right:8em;
}


</style>

<script type="text/javascript">
<!--
/*****************************Ocultar div**************************/

var visto = null;
function ver(num) {

obj = document.getElementById(num);
obj.style.display = (obj==visto) ? 'none' : 'block';
if (visto != null)
visto.style.display = 'none';
visto = (obj==visto) ? null : obj;
}

-->
</script>
</head>
<body>

<table>

<tr >
<td><b><span style="cursor:pointer" onclick="ver('admisiones')"> Titulo uno </span></b></td>
</tr>

<tr >
<td> <div id="admisiones" class="oculto"><a href="#"> Texto uno </a> </div></td>
</tr>

<tr >
<td style="cursor:pointer"><span onClick="ver('Proc_inscrip')"><b> Titulo dos </b></span></td>
</tr>

<tr >
<td> <div id="Proc_inscrip" class="oculto"> <a href="#"> Texto dos</a> </div> </td>
</tr>

<tr >
<td><span style="cursor:pointer" onClick="ver('condi')"><b> Titulo tres </b></span></td>
</tr>

<tr >
<td> <div id="condi" class="oculto"> <a href="#"> Texto tres</a> </div> </td>
</tr>




</table>

</body>
</html>


Espero les ayude en algo.
  #4 (permalink)  
Antiguo 23/01/2013, 14:46
 
Fecha de Ingreso: enero-2013
Mensajes: 3
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Ocultar y mostrar filas de una tabla
Exactamente esto es lo que quería lograr ;)

Código HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Mostrar/ocultar filas y columnas</title>

<style>
/* clase para ocultar el div al inicio */

.oculto {
display:none;
margin-left:2em;
margin-right:8em;
}


</style>

<script type="text/javascript">
<!--
/*****************************Ocultar div**************************/

var visto = null;
function ver(num) {

obj = document.getElementById(num);
obj.style.display = (obj==visto) ? 'none' : 'block';
if (visto != null)
visto.style.display = 'none';
visto = (obj==visto) ? null : obj;
}

-->
</script>
</head>
<body>

<table>

<tr >
<td><b><span style="cursor:pointer" onclick="ver('admisiones')"> Titulo uno </span></b></td>
</tr>

<tr id="admisiones" class="oculto">
<td>
<table>

<tr><td>
<a href="#"> Texto uno </a>
</td></tr>

<tr >
<td><a href="#"> Texto uno.uno </a></td>
</tr>


</table>
</td>
</tr>



<tr >
<td style="cursor:pointer"><span onClick="ver('Proc_inscrip')"><b> Titulo dos </b></span></td>
</tr>

<tr id="Proc_inscrip" class="oculto">
<td>
<table>

<tr><td>
<a href="#"> Texto dos </a>
</td></tr>

<tr >
<td><a href="#"> Texto dos.uno </a></td>
</tr>


</table>
</td>
</tr>

<tr >
<td><span style="cursor:pointer" onClick="ver('condi')"><b> Titulo tres </b></span></td>
</tr>

<tr id="condi" class="oculto">
<td>
<table>

<tr><td>
<a href="#"> Texto tres </a>
</td></tr>

<tr >
<td><a href="#"> Texto tres.uno </a></td>
</tr>


</table>
</td>
</tr>



</table>

</body>
</html>

Etiquetas: filas, javascript, php, tabla
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:27.