"Deshabilitar" una tabla HTML con Javascript

Question

He visto esto hecho en muchos sitios recientemente, pero parece que no puedo rastrear uno. Básicamente, quiero "desactivar" un panel completo (que está en el formulario en una tabla HTML) cuando se hace clic en un botón.

Desactivar quiero decir que no quiero que los elementos de formulario dentro de la tabla sean utilizables y quiero que la tabla se desvanezca.

He podido lograr esto colocando un "velo" sobre la mesa con un div completamente posicionado que tiene un fondo blanco con poca opacidad (para que pueda ver la tabla detrás de él, pero no puede hacer clic cualquier cosa porque el div está delante de él). Esto también agrega el efecto desvanecido que quiero. Sin embargo, cuando configuro la altura del velo al 100%, solo va al tamaño de la pantalla (sin incluir el desplazamiento), así que si un usuario se desplaza hacia arriba o hacia abajo, verá el borde del velo y eso no es bonito.

Supongo que esto se hace típicamente de una manera diferente. ¿Alguien tiene algunas sugerencias como una mejor manera de lograr esto?

Answer 1

¿No puede averiguar la altura del área en píxeles con JavaScript? ¿Y luego establecer la altura del velo a ese número?

no tengo el código exacto en mi cabeza, pero offsetHeight puede hacer el truco

Answer 2

Alguien por favor corrígeme si me equivoco, pero he visto Javascript y algunas bibliotecas Javascript derivadas que tienen muchas opciones para lograr lo que le gustaría hacer. He usado la biblioteca jQuery para hacer algunos efectos similares.

Una cosa para pensar es qué es exactamente lo que está tratando de deshabilitar. Esencialmente, las tablas no son interactivas, por lo que deshabilitar una tabla no sería muy útil. Si se trata de los elementos del formulario dentro de la tabla que desea deshabilitar. Puede lograr esto usando JavaScript.

Además de usar JavaScript para deshabilitar los elementos del formulario, también puede usarlo para cambiar las propiedades de los elementos no interactivos.

Un ejemplo de esto sería usar JavaScript para cambiar el color de la fuente y los bordes y otros elementos no interactivos en la tabla para dar la "apariencia" de estar deshabilitado. Por supuesto, todavía necesita usar JavaScript para deshabilitar los elementos del formulario.

Answer 3

Usted podría intentar javascript como:

function disable(table_id) 
{ 
    var inputs=document.getElementById(table_id).getElementsByTagName('input'); 
    for(var i=0; i<inputs.length; ++i) 
     inputs[i].disabled=true; 
} 

Answer 4

Pruebe el siguiente con jQuery

$("#freez").click(function(){ 
    $('#tbl1').find('input, textarea, button, select').attr('disabled','disabled'); 
}); 
$("#unfreez").click(function(){ 
    $('#tbl1').find('input, textarea, button, select').removeAttr("disabled"); 
});