Mostrar/Ocultar TRs con Javascript

Hay una manera rápida y sencilla de ocultar o mostrar TR con Javascript, es bastante simple.
En este caso voy a mostrar un simple ejemplo que consta de 2 radiobutton que van a mostrar u ocultar determinados TR y por ende determinados filtros (textbox, combos, listas, etc.).

Primero los Script que se pueden poner en la página:

<script language="javascript">

   1:


   2: function opt1_OnClick()


   3: {


   4: trDatos1.style['display'] = display;


   5: }


   6: function opt2_OnClick()


   7: {


   8: trDatos2.style['display'] = display;


   9: }


  10: function OcultarTodos()


  11: {


  12: trDatos1.style['display'] = 'none';


  13: trDatos2.style['display'] = 'none';


  14: }


  15: function Mostrar()


  16: {


  17: var rdo1=window.document.Form1.opt1.checked;


  18: var rdo2=window.document.Form1.opt2.checked;


  19: OcultarTodos();


  20: if (rdo1==true){opt1_OnClick(); return true;}


  21: if (rdo2==true){opt2_OnClick(); return true;}


  22: }


</script>

La función Mostrar se encarga de mostrar uno u otro TR dependiendo de que RadioButton se ha seleccionado y llamará a la función correspondiente, previamente ocultado Todos los TR.
En el Body de la pagina hay que colocar (en el evento OnLoad) la función Mostrar() de esta manera: 



<body onload="Mostrar()">

Luego hay que crear los TR donde van a ir los controles de esta manera:



<TR id="trDatos1" runat="server">
<TD><asp:label id="lblUF">Dato 1</asp:label></TD>
<TD><asp:textbox id="TextBox1" ></asp:textbox></TD>
</TR>
<TR id="trDatos2" runat="server">
<TD><asp:label id="lbldatos2">Datos 2</asp:label></TD>
<TD><asp:textbox id="txt2"></asp:textbox></TD>
<TD><asp:button id="Button1" Text="Boton" runat="server"></asp:button></TD>
<TD><asp:dropdownlist id="cbo2"></asp:dropdownlist></TD>
</TR>

A los 2 TR es importante ponerle un ID para poder llamarlos mas fácilmente, de hecho sino es casi imposible, y que sean runat=Server.
En este ejemplo hice 2 TR con algunas cosas simples pero ahí va lo que se necesite.
Para iniciar la página yo decidí que estén los 2 TR ocultos, de esta manera, poniendo esto en el Page_Load:

trDatos1.Style("display") = "none"
trDatos2.Style("display") = "none"

Ventajas:
Es rápido y con poco código se soluciona, para mostrar u ocultar Textbox es ideal.

Desventaja:
Al esta todo del lado del Cliente, justamente esa es la desventaja viaja todo, si el cliente nunca entra en la opción 2 estaríamos llevándole los datos del a opción 2 de todas maneras.

Este es el primer resultado:

Resultado1

Este el segundo:
Resultado2

 

Saludos.

 

 

Esta entrada fue publicada el a las Lunes 26 de Noviembre de 2007 y está archivada bajo las categorías Javascript. Puedes seguir las respuestas de esta entrada a través de sindicación RSS 2.0. Puedes dejar una respuesta, o trackback desde tu propio sitio.

2 comentarios para “Mostrar/Ocultar TRs con Javascript”

  1. JUAN Dice:
    Enero 11, 2008 a las 2:30 pm | Responder

    EXCELENTE, MUY BUEN CODIGO TE LO AGRADESCO ENE….ME A SERVIDO UN MONTON…..YA Q ESTOY TRABAJANDO CON JSP Y ES BUENO A VECES OCULTAR ALGUNOS TEXT POR AI JEJEJEJE

    GRACIAS POR EL APORTE EXCELENTE….

  2. Ramses Dice:
    Marzo 6, 2009 a las 9:48 am | Responder

    Seguramente funciona, pero la explicación es muy breve y escasa para gente que se está iniciando.

Escribe un comentario