Javascript-CSS Mostrar y Ocultar elementos de formulario

Question

Al usar Javascript, se muestra cómo mostrar y ocultar algunas partes de la tabla (Ej .: TR o TD). Esto debería funcionar según los datos obtenidos de la base de datos. Estoy usando el marco de CakePHP para mi aplicación y usando un solo archivo de vista para agregar y editar. En el modo de edición: Dependiendo de los datos obtenidos, necesito mostrar y ocultar algunas partes de los elementos del formulario.

Escenario Hay cinco preguntas A, B, C, D nad E B depende de A, C depende de B, D depende de C y E depende de D Así, mientras que la adición de He escondido B, C, D y E al seleccionar las preguntas respectivas, se mostrarán las demás preguntas. A, B, C, D - Todas son preguntas "Sí/No" (botones de opción).

Ej:

<'table> 
<'tr id='a'> 
    <'td colspan='2'>A<'/td> 
<'/tr> 
<'tr id='b'> 
    <'td colspan='2'>B<'/td> 
<'/tr> 
<'tr id='cd'> 
    <'td id='c'>C<'/td><'td id='d'>D<'/td> 
<'/tr> 
<'/table> 

(' Prefijo para todas las etiquetas HTML)

¿Cómo puedo hacerlo. Por favor publique sus comentarios.

Answer 1

CSS tiene dos atributos especiales, el primero es display y el segundo es visibility.

pantalla

tiene muchas propiedades o valores, pero los que necesitamos son none y block. none es como un valor oculto, y block es como mostrar. Si usa el valor none, ocultará por completo la etiqueta HTML que haya aplicado este estilo CSS. Si usa block, verá la etiqueta HTML y su contenido.

visibilidad

tiene muchos valores, pero que quieren saber más acerca de los valores y hiddenvisible. hidden funcionará de la misma manera que el valor block para mostrar, pero esto ocultará la etiqueta y su contenido, pero no ocultará el espacio físico de esa etiqueta.

Por ejemplo, si tiene un par de líneas de texto, luego una imagen (imagen) y luego una tabla con tres columnas y dos filas con iconos y texto. Ahora si aplica el CSS visibility con el valor hidden a la imagen, la imagen desaparecerá pero el espacio que la imagen estaba usando permanecerá en su lugar. En otras palabras, terminará con un gran espacio (hoyo) entre el texto y la tabla. Ahora, si usa el valor visible, su etiqueta objetivo y sus elementos serán visibles nuevamente.

A continuación, puede cambiarlos a través de JavaScript para display:

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

para visibility:

document.getElementById(id).style.visibility= "hidden"; 
document.getElementById(id).style.visibility= "visible"; 

para que pueda crear una función que hace esto, y después hacer referencia a esa función cuando han seleccionado la respuesta correcta. Depende de cómo lo seleccionan a cómo lo mostraría.

De lo contrario, si esto no es lo que desea la función innerHTML también podría funcionar.

Answer 2

Para ocultar un elemento pero mantener su lugar dentro del flujo de documentos (es decir, ocultarlo no hará que otros elementos se muevan hacia arriba y llenen su espacio), establezca su propiedad style.visibility en "oculto". Para volver a mostrarlo, configúralo como "visible".

p. Ej.

var el = document.getElementById('a'); 
a.style.visibility = 'hidden'; 
a.style.visibility = 'visible'; 

Para ocultar un elemento y sacarlo de la corriente (es decir, será como si no fuera en el documento, otros elementos se llenan su lugar) establezca su propiedad style.display a "ninguna". Para volver a mostrarlo (y provocar un nuevo flujo del documento porque ahora el elemento ocupará espacio nuevamente) establézcalo en "" (cadena vacía).

var el = document.getElementById('a'); 
a.style.display = 'none'; 
a.style.display = ''; 

Esto último es muy importante ya que permite que el elemento de volver a su valor por defecto o pantalla hereditaria, lo que podría ser cualquiera de una serie de valores (e incluso podría ser diferente a cuando estaba oculto) .

Answer 3

Si puede utilizar jQuery es fácil: ("#b").css("display","none"); o ("#b").css("display","block");

Si no se utiliza jQuery echa un vistazo a este quirksmode.org article.

Answer 4

que añadir a lo escribió M. Azad, si estás usando jQuery, la manera más fácil de ocultar/mostrar algo es utilizar ocultar(), show(), o de palanca(), así: ("#b").hide(); or ("#b").show(); or ("#b").toggle();

toggle() ocultará un elemento visible o mostrará un elemento oculto. Estas funciones también tienen características de animación. Puede leer sobre ellos aquí: http://api.jquery.com/hide/

jQuery es una excelente biblioteca. Muchos lectores de stackoverflow están familiarizados con él, estoy seguro, pero para aquellos que no lo están, vale la pena estudiarlo, y su documentación en línea es excelente.