color de celdas de tabla cambia aleatoriamente

Hola a todos,
Tengo una tabla con celdas con un color de fondo y quiero que al entrar las celdas cambien de color aleatoriamente cogiendo el color de un array, pero que todas tengan el mismo color cuando cargan.
He buscado y solo he encontrado como hacer lo mismo pero con el color de fondo de la web.

Al final he conseguido hacerlo con una celda mediante getElementById pero ahora me encuentro con que no todas las celdas pueden tener el mismo Id, tambien he probado en repetir la sentencia con nombres correlativos; celda2, celda3.. pero entonces cada celda carga con un color diferente, aunque ha sido un gran logro considerando que no tengo ni idea de javascript (ni de casi nada)...

este es el codigo que tengo:

function cambia() {
var color=new Array("#626868", "#515f6c", "#999966", "#9ea8a8", "#b2bdbd", "#41485e", "#777777", "#eeeee6")
document.getElementById('celda').style.background=color[Math.floor(Math.random()*color.length)]
}
</script>

y en la celda:
<td id="celda">

¿hay alguna manera de decirle a la funcion que actue sobre todas las celdas a la vez?

muchas gracias!! espero puedan ayudarme!!

designerFreak escribió:

La idea estaba bien planteada... pero descuidas una cosa:
Math.random(), devuelve un número aleatorio cada vez que ejecutas la función, con lo que por eso, te queda un color para cada celda.
Lo que podrías hacer, es:
Aún así, imagino que pasarás por un bucle, para pasar, como dices, por todas las celdas con nombres correlativos, es decir:
Teniendo los ID de cada celda: {celda1,celda2,celda3...celda10}.

Aún así, digo yo...
¿por qué no cambias el background de la tabla... y no el de cada celda una a una?
Puesto que quieres que sea el mismo para todas... es la mejor manera:

¿ayudado?

Mil gracias!! funciona!! bieeenn!!
es justo lo que necesitaba, es que no sabia como escribir el bucle.. por que me lio, empiezo y me quedo a medias porque yo no soy programador!!
La historia es que no queria colorear toda la tabla porque hay celdas que son siempre de color blanco de fondo. Es decir, el diseño que tengo se basa en el color de las celdas, la pagina de fondo es blanca. bla bla..
Adoro esta web, he conseguido hacer muchas cosas gracias a vosotros! es una gran herramienta!!
gracias!!

designerFreak escribió:

Jejeje...
Para eso, lo mejor sigue siendo cambiar el color de fondo de la tabla, y fijando el de las celdas que quieras.
Osea:
Cuando cambies el color de la tabla: cambiará de todas las celdas, excepto la "celda4", que le has dicho que tenga: "background-color:#888;"

De esa manera, evitas tener que usar un bucle "for", que siempre usa más memoria del PC, y ralentizas la navegación.

lo siento pero no entendí como aplicar esto nuevo que me dices a lo que tengo.
además es que entonce tengo que poner un Id a muchas mas celdas que antes, como unas 40 celdas.. Tampoco entendí esto:

javascript:document.getElementById('tabla').style.backgroundColor='#59'

como llamaria entonces al color aleatorio? me pierdo.. sorry
pero lo que veo jevi tambien es tener que poner Id's como te decia a mogollon de celdas vacias..
Tanto ralentiza el pc?

ahora lo que me pregunto tambien es que si al navegar por la web a una nueva pagina, ¿como haria para decirle de color debe ser? basandose en el color que obtuvo al entrar sabes?¿ jaj .. super complicado o que¿?
seria algo que le dijera a las nuevas paginas que tengan el color de celda que obtuvo aleatoriamente al entrar en la 1a pagina.

por pasos...

1.- no necesitas poner id a todo... lo que pasa es que nuestro buen amigo w3c te dice que suele ser conveniente marcarlo

2.- el unico que necesita identificativo (id) es el elemento tabla...

Código :

<table id="tabla" style="background-color:blue;">

3.- el modo de indicarle el color aleatorio a toda la tabla se indicaria como el compañero te comenta.

Código :

javascript:document.getElementById('tabla').style.backgroundColor='#59A';

que traducido al castellano significa: activo javascript, quiero que al elemento cuya id (getElementById) perteneciendo al objeto dentro del documento (document) se llame tabla (si te fijas la id de la tabla el la llamo tabla, se le modifique el color al #59A

4.- fijarias como te comento el estilo de las celdas que desees simplemente marcando en ellas un style propio

5.- para que el color al que cambie no sea fijo como lo seria con el codigo que hemos marcado anteriormente usarias este mismo

Código :

function cambia()
{var color=new Array("#626868", "#515f6c", "#999966", "#9ea8a8", "#b2bdbd", "#41485e", "#777777", "#eeeee6");
color_tabla=color[Math.floor(Math.random()*color.length)];
document.getElementById('id_de_la_tabla').style.background=color_tabla;
}

solo que a las celdas que quieras mantener con otro color le modificas el style como ya hemos mencionado anteriormente.

6.- en cuanto a que el color que te sale la vez que entras y el color que saldra en las diferentes hojas.... necesitaras otro tipo de tecnologias como son php o ajax, ya que con javascript solo puedes plantear las variaciones cuando la pagina la ve el cliente no tiene memoria... tendrias que usar variables de servidor... o eso es lo que yo al menos creo.... un saludin y espero haberte ayudado.

Ok, lo he pillado,
esto lo entendia: javascript:document.getElementById('tabla').style.backgroundColor='#59A';
lo que no entendia es que ahi dijera que fuera el color #59A, porque esa sentencia hace que el background de la tabla sea siempre de ese color, supongo que era para explicarlo.. perdon

De todos modos tengo ahora mucho mas curro en poner style="background-color:#FFFFFF" celda por celda de cada pagina sabes? antes solo tenia que colorear 12 celdas de color, ahora tengo que poner el style (a mano, linea por linea) 50.000 veces.
¿como pondrias de una manera rapida fondo blanco a las celdas? he probado a ponerlo en la hoja de estilos en body background-color:#FFFFFF; pero no hace caso.

Como lo tenia antes ya funcionaba, y lo de ralentizar la maquina, la mia para nada.. serà con maquinas del año 98, ( a esas que les den! que se actualicen que les toca..) tan grave es utilizar un for en el javascript?
muchas gracias!!!

pon la url de la web, y te decimos cuan grave seria... esto es todo teoria... evidentemente no es malo hacerlo con un for... pero no es el mejor camino...., con los datos que has dado hasta ahora... solo te puedo decir como hacer lo del color... si pones mas encantado de ayudarte...

por ejemplo explica que tipo de tabla quieres hacer y cuales con color... cuales no... esas cosas... o pon directamente la web

Efectivamente... depende...
Si tienes que cambiar más celdas, con color aleatorio, que las celdas fijas, lo mejor es CAMBIAR EL FONDO DE LA TABLA.
En cambio...
Si la mayor parte de la tabla permanece fija, y sólo cambias unas pocas celdas, lo mejor sería CAMBIAR ESAS CELDAS (como decías al principio)

Es decir, es cuestión de qué haya más, si celdas fijas, o celdas de color variable.


Sobre poner el fondo a todas las celdas fijas, es muy fácil:
- Le pones a las celdas en cuestión: class="fijo1"
- y en la hoja de estilos: .fijo1 {background-color:#470;}

De esa manera, puedes cambiar cuando quieras el color de las celdas fijas con sólo cambiar el color de la clase "fijo1".


Aún así, lo mejor es, como diicen, que indiques la WEB en la que quieres hacer eso, y quizá así podamos ayudarte mejor.

Ok, os paso link de la maqueta, me he rallado a subirla en un hosting gratuito por que me da paranoia que luego busquen mi nombre y encuentren este post lo primero.. (me ha pasado mas veces)

gracias!!


http://perso.gratisweb.com/designerFreak/

Por cierto... para decirle qué color aleatorio has usado en la página anterior, y usarla de entonces en adelante, puedes usar cookies gestionadas desde javascript.

Busca por ahí algun script que escriba y lea cookies... y listo.
(sería tan fácil como:)

Puesto eso, AL PRINCIPIO de cada una de tus páginas, pasaría la configuración inicial a las demás páginas.

Las funciones leer_cookie, y guardar_como_cookie(nombre_cookie,valor_cookie) son las que tendrías que buscar.
Están muy documentadas, y podrían ser, por ejemplo, estas dos, respectivamente:

getCookie escribió:

setCookie escribió:

*sacadas de aquí.

Esas dos funciones, creo que te valdrían "tal cual".
Aquí, encontrarás documentación, en castellano, sobre las cookies en javascript.


** EFECTIVAMENTE, con ese código, te valdrá.

Suerte.

Muchas gracias por el pedazo de info que me has dado. la caña!
lo probaré aunque me da hasta miedo.. cookies! que profesional..
vaya liada me estoy pegando, en realidad es una web muy basica y sencilla.. no se si hacia falta tanto flipeteo.. pero seguro que acabo usando esto porque esta muy currado..
otra cosa, ¿los javascipts, cookies, etc. hacen que las paginas se bloqueen por explorer la 1a vez que las visitas o que?
Ahora la casualidad ha hecho que me plantee usar colores diferentes en cada pagina.. creo que le da vidilla..
ademas supongo que con el codigo este aunque le pase el mismo color que las celdas anteriores, al cargar volverian de cero, y es un efecto que no me gusta.. prefiero que se mantengan visibles al cambiar de pagina, de hecho las de colores diferentes tambien tardan mas en cargar que lo demas (imagenes) ...
de todos modos te digo a ti y a los que me ayudaron antes..
muchisimas gracias
felizz fin de año!! y que tengan una buena entrada al 2008!!!

chao!!

Cambiar el color de fondo de toda la tabla no es lo mas practico que puedes hacer, por que quieres conservar algunas celdas con sus colores originales. Te sugiero que le eches un vistazo a jQuery, una libreria de javascript, que te puede facilitar mucho las cosas. Un ejemplo sería:

Código :

// Revisamos si el documento cargó
$(document).ready( function(){
   //Creamos el array de colores
   var colores = ["#f90", "#069", "#000","#f00","#012","#987","#ff0","#0ff","#066783"];
   //Agarramos un aleatorio
   var color_aleatorio = colores[ Math.floor( Math.random() * colores.length) ];
   
   // Le decimos "selecciona todas las td dentro de lo que sea que tenga id=mitablacool, y haz lo siguiente con cada una"
   $("#mitablacool td").each( function(){
      // Grabamos el color actual en una variable
      var actual_color = $(this).css("background-color");
      // Miramos si ya hay un color previo
      if(  (actual_color == undefined) || (actual_color == "transparent") ){
         // Le colocamos nuestro color aleatorio
         $(this).css("background-color", color_aleatorio ); 
         // Y voila :D
      }
   });
});

Y listo. El script analiza si la celda ya tiene un color. Si no es as, le pone el aleatorio. Notaras que coge todas las td dentro de un elemento con id "mitablacool". Esto lo hize para ahorrar performance, para que no ejecute lo mismo en todas las tablas de la pagina. Puedes cambiarlo si quieres.

Si quieres que hayan celdas con un color fijo, ponles una class, y les asignas un color desde css. Por ejemplo, el codigo de arriba funcionaria perfecto con el sgte html:

Código :

<style>
.especial{
background-color:#fff;
}
</style>
<table id="mitablacool">
   <tr>
      <td class="especial">
         Soy especial
      </td>
      <td>
         Hola
      </td>
      <td>
         Hola
      </td>
   </tr>
      <tr>
      <td>
         Hola
      </td>
      <td  class="especial">
         Hola
      </td>
      <td>
         Hola
      </td>
   </tr>
      <tr>
      <td>
         Hola
      </td>
      <td>
         Hola
      </td>
      <td>
         Hola
      </td>
   </tr>
</table>

Un saludo!

PD: Busca el tuto de jQuery en el buscador.

He linkado la pagina al jQuery como decia tu tutorial y he probado con tu script pero no se ve ningun color. Se ve todo el fondo blanco. ¿algo falla o era un ejemplo incompleto? por lo que he leido creo que con jQuery no tardaria en cargar el color porque se ejecuta antes de que carguen las imagenes.. pero yo no se si me aclaro mucho.. la verdad.. esta muy interesante, el efecto del ejemplo del tutorial es la caña. muy chulo..

muchas gracias!

No se bien cual podria ser el error en tu caso.
Primero, prueba revisando las etiquetas script:

Código :

<script src="link_a_jquery.js"></script>
<script>
// Ejemplo de arriba
</script>

... y que estas esten dentro de head.

Luego, revisa que hayas cerrado las etiquetas <script> con </script>.
Y por ultimo, revisa que le pusiste a la tabla el id "mitablacool".

Si eso no resuelve tu problema, sube tu pagina a algun sitio y nos pasas el link

Todo esta correcto, pero acabo de comprobar que solo es con Safari donde no se ve nada. Con Firefox i Netscape va perfecto.. que raro, no?

el link es el mismo que di antes:

http://perso.gratisweb.com/designerFreak/index.html

muchas gracias!!
saludos!

Es decir uso Mac, pero eso da lo mismo, no?

que uses mac da igual, el problema es como interprete safari el codigo que tiene que mostrar en tu web.

Dices de usar la librería jQuery, para cambiar el fondo de cada celda, una a una, porque...

Lunatic Lycanthrop escribió:

y sigues:

Lunatic Lycanthrop escribió:

Pero digo yo...
Si le cambias el "background-color" a una tabla, que contiene algunas celdas con su propio "background-color"...
¿NO PERMANECE ESTE INALTERADO, cambiando sólo el de las celdas sin fondo?
Es decir... lo mismo que hace el script que propones...

(de hecho, es lo que haría este poco de código:) , ahorrando, dicho sea de paso, gran cántidad de código.



PD: Imagino que el "$(document).ready(function(){/*función*/})", de jQuery
será similar al "window.addEvent('domready', function(){/*función*/})", de Mootools, ¿verdad Lunatic Lycanthrop?