Oye, que me ha picado el gusanillo de hacer algo sin tocar demasiado el HTML:
Código PHP:
<table id="tabla1" border="1">
<tr>
<td>a</td>
<td>e</td>
</tr>
<tr>
<td>i</td>
<td>o</td>
</tr>
</table>
<table id="tabla2" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<table id="tabla3" border="1">
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
</table>
<script>
/******************
FUNCIÓN PARA APLICAR LOS EVENTOS A LAS CELDAS
******************/
// recorre los hijos hasta encontrar un TD, cuando encuentre aplica un evento mouseover mOver y mouseout mOut
function recorrerHijos(elem,mOver,mOut) {
if(elem.nodeType==1 && elem.tagName=="TD") { // tipo ELEMENT_NODE y encima es TD
elem.onmouseover=mOver; //aplicamos evento
elem.onmouseout=mOut; //aplicamos evento
}
else if (elem.nodeType==1 && elem.hasChildNodes() ) { //ELEMENT_NODE y encima con hijos
for(var hijo=0; hijo<elem.childNodes.length; hijo++) //recorremos cada hijo con la función, recursivamente
recorrerHijos( elem.childNodes[hijo] , mOver, mOut);
}
}
/******************
FUNCIONES PARA COLOREAR CELDAS, FILAS O TABLAS (según tagPadre)
******************/
function colorea(celda,tagPadre) {
// subiremos un nivel en el DOM mientras el elemento actual no tenga el tag tagPadre
while( celda.nodeType==1 && celda.tagName.toUpperCase()!=tagPadre.toUpperCase() )
celda=celda.parentNode;
celda.style.backgroundColor="#aaf";
}
function desColorea(celda,tagPadre) {
while( celda.nodeType==1 && celda.tagName.toUpperCase()!=tagPadre.toUpperCase() )
celda=celda.parentNode;
celda.style.backgroundColor="#fff";
}
/******************
APLICACIÓN DE LOS EVENTOS QUERIDOS A LAS TABLAS DESEADAS
******************/
var tablasConEfecto=["tabla1","tabla2"];
for(var a in tablasConEfecto) {
var tablaActual=tablasConEfecto[a];
var elem=document.getElementById(tablaActual);
recorrerHijos(elem,
Function("colorea(this,'TR')"),
Function("desColorea(this,'TR')")
);
}
</script>
Me ha gustado sobre todo hacer la función genérica
colorea y
desColorea, que según se le digan qué argumentos hace una cosa u otra:
colorea(this,"TD") -> colorea la celda
colorea(this,"TR") -> colorea la fila
colorea(this, "TABLE") -> colorea la tabla
(indistintamente de las mayúsculas y minúsculas, y siempre con el
this.
Lo que hace es buscar el padre de
this (de la celda) que tiene ese tag. Si el tag es "TD" no busca padre ninguno.
Es genérico casi todo, sólo hay que añadir los id's a
tablasConEfecto y escoger los colores y elementos a colorear, fácil y reutilizable (y no ensucia el html).
Contadme vuestra opinión
