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.

 

 

Anuncios

3 comentarios sobre “Mostrar/Ocultar TRs con Javascript

  1. 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….

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s