¿Cómo hacer que html parezca deshabilitado?

Leo en algunos foros que para hacer que una tabla html parezca deshabilitada es para agregar una capa de div. Mi problema es que no sé cómo hacerlo.¿Cómo hacer que html parezca deshabilitado?

tengo 3 preguntas:

1.) ¿Cómo voy a establecer la altura div que se ajusta automáticamente a la altura de la mesa cada vez que la mesa aumenta su altura cuando se añade una nueva fila.

2.) ¿Cómo haré que div cubra la mesa? No sé cómo ponerle capas a los elementos html.

3.) ¿Cómo voy a codificar el javascript que hará que mi tabla parezca deshabilitada cuando haga clic en el botón "Deshabilitar" y la habilite nuevamente cuando haga clic en el botón "Habilitar".

tabledisabletest.html

<html> 
<head> 
<script type="text/javascript"> 

</script> 
<style type="text/css"> 
table#tblTest { 
    width: 100%; 
    margin-top: 10px; 
    font-family: verdana,arial,sans-serif; 
    font-size:12px; 
    color:#333333; 
    border-width: 1px; 
    border-color: #666666; 
    border-collapse: collapse; 
} 

table#tblTest tr.highlight td { 
    background-color: #8888ff; 
} 

table#tblTest tr.normal { 
    background-color: #ffffff; 
} 

table#tblTest th { 
    white-space: nowrap; 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #dedede; 
} 

table#tblTest td { 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #ffffff; 
} 

#disabler { 
    width: 100%; 
    height: 200px; 
    background-color: #bbb; 
    opacity:0.6; 
} 
</style> 
</head> 

<body> 

<div id="disabler"></div> 

<table id="tblTest"> 
    <thead> 
    <tr> 
    <th>Name</th> 
    <th>Address</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>Tom</td>  
    <td>UK </td> 
    </tr> 
    <tr> 
    <td>Henrik</td> 
    <td>Denmark</td> 
    </tr> 
    <tr> 
    <td>Lionel</td> 
    <td>Italy</td> 
    </tr> 
    <tr> 
    <td>Ricardo</td>  
    <td>Brazil</td> 
    </tr> 
    <tr> 
    <td>Cristiano</td> 
    <td>Portugal</td> 
    </tr> 
    </tbody> 
</table> 
<input type="button" onclick="disable = true;" value="Disable" /> 
<input type="button" onclick="disable = false;" value="Enable" /> 
</body> 
</html>

que tienen el div disabler hacer la desactivación pero no puedo hacer que cubre la mesa.

Por favor, ayúdenme con esto. Soy tan nuevo en esto. Gracias por adelantado.

Fuente

2011-10-27 NinjaBoy

Sugerencia: Usar jQuery BlockUI . Demos: http://jquery.malsup.com/block/#demos – Dev

Creo que necesito aprender el javascript nativo antes de saltar a una tecnología avanzada. También necesito aprender Javascript porque necesito prepararme para un examen. – NinjaBoy

¿A qué se refiere exactamente al hacer que * parezca deshabilitado *? ¿El usuario aún puede seleccionar texto de él? ¿Necesita tener esos bordes y efectos de sombras que ve en los controles desactivados? –

Si desea que el elemento disabler se superponga a su tabla, agregue un margen inferior negativo a la misma. Además, establezca opacity en un valor inferior a 1, para no cubrir completamente (ocultar) la tabla que está detrás.

#disabler { 
    opacity: 0.5; 
    margin-bottom: -200px; 
}

Como ha mencionado que lo hace con fines educativos, no daré la solución completa. Consulte this fiddle para comenzar.

Si desea hacer una mirada del texto "no seleccionable", utilice el siguiente CSS:

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none;

Fuente

2011-10-27 14:00:33

Gracias, pero ¿cómo voy a hacer que se ajuste automáticamente cuando se inserta una nueva fila en la tabla. – NinjaBoy

@ChickenBoy Utilice JavaScript. La 'altura' de un elemento se puede cambiar usando 'element.style.height = height +" px ";' (donde 'height' es un número)'. Para obtener el tamaño de un elemento, use 'element.offsetHeight'. ** Consulte http://jsfiddle.net/RAb8b/1/** para obtener un código JavaScript adicional. ** De nuevo: no estoy mostrando la solución completa, * solo * consejos útiles **, para que aprendas algo. La mejor forma de aprender es adquirir experiencia y cometer errores. –

Muchas gracias. ¡Eres una gran ayuda! – NinjaBoy

Usted tendrá que colocar el divdisabler en la parte superior de la tabla.

Puede hacerlo colocando absolutamente el div. Agregué un nuevo div, tableContainer envolviendo el div y la tabla disabler, y posicionando absolutamente el div.

<div id="tableContainer"> <!-- New Div--> 
    <div id="disabler"></div> 
    <table>....<table> 
</div>

Añadir position: absolute; a la #disabler

Y más importante escribir el código JavaScript para mostrar y ocultar la div:

function disableTable() 
{ 
    document.getElementById("disabler").style.display = "block"; 
} 

function enableTable() 
{ 
    document.getElementById("disabler").style.display = "none"; 
}

vivo Ejemplo: http://jsbin.com/icuwug

Fuente

2011-10-27 14:01:22 Nivas

¿Cómo hacer que html parezca deshabilitado?

Respuesta

Cuestiones relacionadas