Cómo deshabilitar y habilitar la tabla HTML con javascript?

Quiero saber cómo puedo deshabilitar y habilitar el resaltado en una tabla HTML usando javascript haciendo clic en un botón html.Cómo deshabilitar y habilitar la tabla HTML con javascript?

Éstos son mis códigos:

tabletest.html

<html> 
<head> 
<script type="text/javascript"> 
function disableTable() { 
    document.getElementbyId('tblTest').disabled = true; 
} 

function enableTable() { 
    document.getElementbyId('tblTest').disabled = false; 
} 
</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; 
} 
</style> 
</head> 

<body> 
<table id="tblTest"> 
    <thead> 
    <tr> 
    <th>Name</th> 
    <th>Address</th> 
    </tr> 
</thead> 
<tbody> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Tom</td>  
     <td>UK </td> 
    </tr> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Hans</td> 
     <td>Germany</td> 
    </tr> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Henrik</td> 
     <td>Denmark</td> 
    </tr> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Lionel</td> 
     <td>Italy</td> 
    </tr> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Ricardo</td>  
     <td>Brazil</td> 
    </tr> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Cristiano</td> 
     <td>Portugal</td> 
    </tr> 
</tbody> 
</table> 
<input type="button" onclick="disableTable();" value="Disable" /> 
<input type="button" onclick="enableTable()" value="Enable" /> 
</body> 
</html>

Cada vez que haga clic en el botón Disable el resaltado mesa todavía está activado. Soy un poco nuevo en esto, así que realmente necesito tu ayuda.

Fuente

2011-10-26 NinjaBoy

'disabled' significa que un control de formulario no será enviado y no se puede editar. Las tablas no son controles de forma, entonces lo que está pidiendo no tiene sentido. – Quentin

Esto es lo que quiero que suceda. Cuando hago clic en el botón "Desactivar", quiero que se resalte la fila y se eliminen todos los efectos. – NinjaBoy

<html> 
<head> 
<script type="text/javascript"> 
disable = new Boolean(); 
function highlight(a) { 
    if(disable==false)a.className='highlight' 
} 

function normal(a) { 
    a.className='normal' 
} 
</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; 
} 
</style> 
</head> 

<body> 
<table id="tblTest"> 
    <thead> 
    <tr> 
    <th>Name</th> 
    <th>Address</th> 
    </tr> 
</thead> 
<tbody> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Tom</td>  
     <td>UK </td> 
    </tr> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Hans</td> 
     <td>Germany</td> 
    </tr> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Henrik</td> 
     <td>Denmark</td> 
    </tr> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Lionel</td> 
     <td>Italy</td> 
    </tr> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Ricardo</td>  
     <td>Brazil</td> 
    </tr> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <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>

fija de su código. Use una función para verificar si está deshabilitada, si no lo está, luego resalte. Si es así, entonces no. Suficientemente simple.

Demo

Fuente

2011-10-26 07:33:39

No se puede deshabilitar una tabla. ¿Qué quieres lograr con esto? Las tablas se leen solo de todos modos.

Si tiene etiquetas de entrada en la tabla, puede desactivarlas una por una.

Ver también "Disabling" an HTML table with javascript

Fuente

2011-10-26 06:49:32 PiTheNumber

Quiero que parezca un botón html deshabilitado. – NinjaBoy

Pero una tabla no es un botón. Puede cambiar la clase de tabla y definir el estilo desactivado mediante CSS:

, CSS: .disabled tr {background-color: gray; } – PiTheNumber

Si usted quiere que "mirar" desactivado o activado, añadir reglas de clase a una hoja de estilo y añadir clases a la mesa para activar o desactivar.

function disableTable() { 
    addClassName(document.getElementbyId('tblTest'), 'disabled'); 
} 
function enableTable() { 
    removeClassName(document.getElementbyId('tblTest'), 'disabled'); 
} 

function trim(s) { 
    return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' '); 
} 

function hasClassName (el, cName) { 
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)'); 
    return el && re.test(el.className); 
} 

function addClassName(el, cName) { 
    if (!hasClassName(el, cName)) { 
     el.className = trim(el.className + ' ' + cName); 
    } 
} 

function removeClassName(el, cName) { 
    if (hasClassName(el, cName)) { 
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g'); 
    el.className = trim(el.className.replace(re, '')); 
    } 
}

Fuente

2011-10-26 06:57:10 RobG

¿Pueden por favor darme una pista de cómo hacer esto? Soy realmente nuevo en esto. Gracias – NinjaBoy

No se puede deshabilitar una tabla. Lo que quiere hacer es deshabilitar el botón de entrada y tener clase en la tabla HTML que da la ilusión de desvanecerse/encapsularse en el evento onclick del botón que elija.

Fuente

2011-10-26 07:08:23 CPerez721

¿Pueden por favor darme una pista de cómo hacer esto. Soy realmente nuevo en esto. Gracias – NinjaBoy

Agregue una clase a su tabla HTML. Diga (table.class) Ahora, en el evento onclick para el botón que elige que se muestre "Disable" en él, asegúrese de que el evento onclick active los nuevos estilos para la tabla html. (Puede ir por algunas rutas aquí, es decir, JQuery, propiedades de opacidad CSS3) – CPerez721

Creo que la parte del código que RobG escribió es muy complicada para un procedimiento simple. No hay necesidad de REGEX en su problema. – CPerez721

No se puede deshabilitar una tabla. Una tabla solo muestra datos: en HTML, solo puede deshabilitar elementos de formulario como entradas, selecciones y áreas de texto, por lo que ya no puede interactuar con ellos (es decir, escriba datos en él, haga clic en él o seleccione una opción).

Creo que lo que está tratando de lograr es tener los eventos en MoverOver/-Out eliminar al hacer clic en el botón? Puede ser mejor que use jQuery - eche un vistazo a Events. La solución es agregar y eliminar eventos al hacer clic en el botón como en este fiddle.

Fuente

2011-10-26 07:13:54 Peavey

Siga esta receta:

definir dos conjuntos de reglas CSS. Un conjunto de reglas siempre comienza con table.enabled, el otro con table.disabled

Para activar/desactivar toda la tabla, busque el elemento DOM (usando document.getElementbyId('tblTest') cuando la tabla tiene la idtblTest) y asignar la clase respectiva:

document.getElementbyId('tblTest').classname = enabled ? 'enabled' : 'disabled';

Fuente

2011-10-26 07:15:18

Si desea hacer que la tabla "no se pueda cliquear" en cualquier lugar, puede agregar una div transparente con el mismo tamaño.

Fuente

2011-10-26 07:17:58

Esto eliminará los eventos onmouseover de tus amigos.

function disableTable() { 
    var rows = document.getElementsByTagName("tr"); 
    for (var i = 0; i < rows.length; i++) { 
    rows[i].onmouseover= null; 
    } 
    }

Fuente

2011-10-26 07:30:57 roel

Cuestiones relacionadas

Cómo deshabilitar y habilitar la tabla HTML con javascript?

Respuesta

Cuestiones relacionadas