Ver Mensaje Individual
  #16 (permalink)  
Antiguo 26/03/2007, 13:30
Avatar de derkenuke
derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 21 años, 4 meses
Puntos: 45
Re: cambio de color

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==&& elem.tagName=="TD") {    // tipo ELEMENT_NODE y encima es TD
        
elem.onmouseover=mOver;        //aplicamos evento
        
elem.onmouseout=mOut;        //aplicamos evento
    
}
    else if (
elem.nodeType==&& elem.hasChildNodes() ) {        //ELEMENT_NODE y encima con hijos
        
for(var hijo=0hijo<elem.childNodes.lengthhijo++)        //recorremos cada hijo con la función, recursivamente
            
recorrerHijoselem.childNodes[hijo] , mOvermOut);
    }
}


/******************
    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==&& celda.tagName.toUpperCase()!=tagPadre.toUpperCase() )
        
celda=celda.parentNode;
    
celda.style.backgroundColor="#aaf";
}
function 
desColorea(celda,tagPadre) {
    while( 
celda.nodeType==&& 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
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.