cambio de color

Vane_ · #1 (**permalink**) 23/03/2007, 07:58

Hola a todos,

Tengo un formulario con varios elementos, y lo tengo colocado en una tabla (en celdas y demás) Ahora, lo que quiero es que, cada vez que pinche en 1 de los elementos, ciertas celdas me cambien de color. Pero no se hacerlo por celdas....
Alguien me puede ayudar ??

JavierB · #2 (**permalink**) 23/03/2007, 09:10

Hola Vane_

No se si habré entendido bien tu duda

pero te doy una pista:

Código:

<input type="text" onfocus = "document.getElementById('pepe').style.background = '#FF0'" />
<table>
<tr><td id="pepe">
...

Saludos,

Vane_ · #3 (**permalink**) 23/03/2007, 10:09

Hola JavierB. Gracias por tu propuesta, lo he probado y sólo me funciona para una celda, lo pongo en varias y solo me cambia el color de una....

Otra cosa, y para que cuando se quite el foco, que método hay ??

JavierB · #4 (**permalink**) 23/03/2007, 10:32

Hola de nuevo.

Un ejemplo más completo:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function marcar() {
  for (i=0; celda = arguments[i]; i++)
    document.getElementById(celda).style.background = '#F0F';
}
</script>
</head>
<body>
<input type="text" onfocus = "marcar('algo1','algo2')" />
<table>
<tr>
<td id="algo1">Celda 1</td>
<td id="algo2">Celda 1</td>
</tr>
</table>
</body>
</html>

Cuando se quita el foco, se produce el evento onblur

Saludos,

zyon · #5 (**permalink**) 23/03/2007, 10:38

intenta crear una funcion que te lo haga en todas...

Código HTML:

<script>
function cambiaColor(obj){
  eval("document.getElementById('td"+obj.name+"').style.background = '#FF0';");
}

</script>

<input type="text" name="pepe" onfocus = "cambiaColor(this);" />
<table>
<tr><td id="tdpepe">
...

fijate que cambie el nombre del TEXT...espero te funcione! suerte!

Vane_ · #6 (**permalink**) 23/03/2007, 10:40

Ok, pero mira, si yo pongo este código:

Código PHP:

  <html>

<head>

<script type="text/javascript">

function marcar() {

  for (i=0; celda = arguments[i]; i++)

    document.getElementById(celda).style.background = '#F0F';

}

</script>

</head>

<body>

<input type="text" onfocus = "marcar('algo1')" />

<table>

<tr>

<td id="algo1">Celda 1</td>

<td id="algo1">Celda 1</td>

</tr>

</table>

<table>

<tr>

<td>Celda 2</td>

<td id="algo1">Celda 2</td>

</tr>

</table>

</body>

</html>

Sólo me cambia el color de la primera celda.....

OK, el onblur lo probaré cuando este funcione...

JavierB · #7 (**permalink**) 23/03/2007, 11:24

Rehola.

Fíjate bien en mi ejemplo y verás que es distinto del tuyo. Los id no pueden repetirse, tienen que ser únicos.

Pon id diferentes y cuando llamas a la función le pasas los id que quieres que se cambien:

Código:

<input type="text" onfocus = "marcar('algo1','algo2')" />

Saludos,

Vane_ · #8 (**permalink**) 23/03/2007, 11:29

Ahhh ok!! Yo pense que se podían poner ids iguales !!!! Hecho !!

Muchas gracias.

Vane_ · #9 (**permalink**) 25/03/2007, 15:29

Para cambiar el color de una tabla entera se puede hacer igual pero en la etiqueta <table> ?

JavierB · #10 (**permalink**) 26/03/2007, 00:50

Hola Vane_

Ponle un id a la tabla, lo pruebas y nos cuentas.

Saludos,

Vane_ · #11 (**permalink**) 26/03/2007, 05:28

Que va, eso tampoco me funciona. Ni para una fila, solo me ha funcionado para celdas....

JavierB · #12 (**permalink**) 26/03/2007, 05:35

Hola.

Acabo de probar esto y sí me ha funcionado:

Código:

<input type="text" onfocus = "document.getElementById('pepe').style.background = '#FF0'" />
<table id="pepe">

Saludos, :adios.

Vane_ · #13 (**permalink**) 26/03/2007, 06:08

Gracias por contestar JavierB. Lo he peusto en otra tabla, y sólo me cambia el color a una parte de ella, porqué puede ser ???

JavierB · #14 (**permalink**) 26/03/2007, 06:22

Es muy raro

¿Puedes poner el código HTML y JavaScript que estás usando?

Saludos,

Vane_ · #15 (**permalink**) 26/03/2007, 06:30

Mira, por ejemplo, la tabla la pongo así:

Cita:

Cuando pulso en los elementos que quiero que haga el cambio de color a la tabla:

Cita:

<input type="checkbox" name="estadisticas_num_visitas" value="activado" <?php if ($estadisticas_num_visitas2 == "activado") echo "checked"; ?> onFocus="marcar('tablaestad')" />

Y la función javascript:

Cita:

derkenuke · #16 (**permalink**) 26/03/2007, 13:30

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