Solución:
<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>
<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>
Corregido su código. Use una función para verificar si está deshabilitada, si no lo está, resalte. Si es así, no lo hagas. Suficientemente simple.
Manifestación
No se puede desactivar una mesa. ¿Qué quieres lograr con esto? Las tablas son de solo lectura de todos modos.
Si tiene etiquetas de entrada en la tabla, puede desactivarlas una por una.
Consulte también “Deshabilitar” una tabla HTML con javascript.
Si desea que “parezca” deshabilitado o habilitado, agregue reglas de clase a una hoja de estilo y agregue clases a la tabla para habilitado o deshabilitado.
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, ''));
}
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)