Ocultar/mostrar parte de una tabla en función de radio buttons

[peprex]

Hola amigos,

tengo la siguiente situación: una tabla html enorme en cuya cabecera tengo dos radio buttons, tipo true false. El caso es que por defecto estos aparezcan seleccionados a false (hasta aquí no hay problema) y si clickamos en true, se nos aparezca el resto de la tabla. Al volver pulsar el false debería ocultarse, dejando sólo la cabecera de los radio.

He estudiado hacerlo por el DOM como en la mayoría de tutoriales que he visto por allá. El problema que como digo la tabla tiene múltiples rows, cada row múltiples td, cada tr tiene múltiples atributos pensados para usar en procesos posteriores .... me pareció algo pesado y ineficaz picar por funciones de tipo dom todo esto .... así que se me ocurre:

Hay alguna manera de parir la tabla ya montada y ocultar / mostrar su contenido de cabecera para abajo mediante los radio buttons? (en vez de montarla / desmontarla con funciones de DOM)

Adjunto ejemplo reducido de la tabla para hacernos una idea:

Código:

<TABLE id="t_1" border="5" align="center">
   <TR><TD>Tabla 1</TD>
            <TD><LABEL>Mostrar<INPUT type="radio" id="t_1_true" onClick="show_table()" /></TD>
            <TD><LABEL>Ocultar<INPUT type="radio" id="t_1_false" onClick="hide_table()" /></TD>
   </TR>
<TR><TD>Table settings</TD></TR>
<TR id="t_settings_1">
           <TD><INPUT ...></TD>
           <!-- Estructura compleja de tabla que seguiria ... --!>
</TR>
<!-- Estructura compleja de tabla que seguiria ... --!>
</TABLE>

Lo que debería mostrar/ocultar es lo que hay de "Table settings" para abajo ... qué consejos me dáis (soy bastante novato ... ) , muchas gracias de antemano !

[snahor]

Algo que se me ocurre es que en tu css tengas algo asi:

Código:

.oculto { display: none; }

y le apliques eso a los tr

Código:

<tr id="..." class="oculto">...</tr>

Si quieres que sea visuble o no, lo controlas con javascript en ese cambiarías el display a inline, o agreagar y remover clases

Código:

.visible { display: inline; }

Código:

<tr id="..." class="visible">...</tr>

Otra opción es que sean tablas separdas, asi controlarias por el id, yo iria por esta opcion.

[peprex]

Bueno al final lo solucioné de la siguiente manera, por si a alguien le interesa adjunto condigo html:

Código:

<TABLE id="t_1" border="5" align="center">
   <TR><TD>Tabla 1</TD>
            <TD><LABEL>Mostrar<INPUT type="radio" id="t_1_true" onClick="show_table()" /></TD>
            <TD><LABEL>Ocultar<INPUT type="radio" id="t_1_false" onClick="hide_table()" /></TD>
   </TR>
<TBODY id="tb_1">
<TR><TD>Table settings</TD></TR>
<TR id="t_settings_1">
           <TD><INPUT ...></TD>
           <!-- Estructura compleja de tabla que seguiria ... --!>
</TR>
<!-- Estructura compleja de tabla que seguiria ... --!>
</TBODY>
</TABLE>

Y en cuanto al javascript ...

Código:

function show_fields()
{
	var table = document.getElementById(tb_1).style.display = "block";
}

function hide_fields()
{
	var table = document.getElementById(tb_1).style.display = "none";
}

En resúmen, aprovechándome de crear un tbody y jugar con el atributo display en el javascript ... gracias y espero que le sirva a alguien