Creación con tablas con for y problemas con las id

[Crazy_Xavy]

Tengo varias dudas, así que iré una a una.

Lo primero, quiero crear una tabla con i filas y j columnas, y quiero darle a la <div> que hay dentro de cada celda una ID basada en su posición. La primera fila de la primera columna debería tener id="00", la segunda fila de la primera columna id="10" y así. La tabla la consigo hacer, pero no consigo que me "guarde" las IDs. Aquí el código:

Código PHP:

  <table border="1" width="420" height="330">
    <script name="JavaScript">
        for (i=0;i<10;i++)
        {    document.write("<tr>")
            for (j=0;j<13;j++)
            {    document.write("<td><div id="+i+""+j+" onClick=alert(this.Id)>&nbsp;</div></td>")
            }
            document.write("</tr>")
        }
    </script>        
</table>  
  

Como se puede observar, metí un onClick=alert(this.Id) para, posteriormente, verificar si se le había dado la ID que yo quería, obteniendo un undefined como una casa.

El objetivo del código es hacer una tabla en la que, al hacer click en una celda, esta celda cambie de color, y, al mismo tiempo, cambie el valor de un número que está bajo la tabla (i.e. si la celda está en blanco, el número deberá ser 0, y si la celda está en negro, el número deberá ser 1).

Esto último lo conseguí hacer de la siguiente manera (en otro código, no en este):

Código PHP:

  function cambiar00()
    { 
    this.bgColor='#000000'
    if (document.getElementById("00").innerHTML == "1")
        {document.getElementById("00").innerHTML = "0"}
        else
        {document.getElementById("00").innerHTML = "1"}        
    }  
   

Y las celdas serían así:

Código PHP:

  <td name="00" onclick="cambiar00(); if(this.bgColor=='#000000'){this.bgColor='#FFFFFF'}else{this.bgColor='#000000'}" bgcolor="#FFFFFF">&nbsp;</td>  
   

El primer problema que encontré es que no pude meter el if(this.bgColor=='#000000'){this.bgColor='#FFFFFF' }else{this.bgColor='#000000'}" bgcolor="#FFFFFF" dentro de la función (¿Por qué?).

El segundo problema es que el código pesaba demasiado, y me parece una burrada tener que copy-pastear estos códigos 130 veces, además de tener que crear 130 funciones (es una tabla de 13x10).


Espero que me puedan ayudar con este problemón que me tiene la cabeza comida desde anoche :( .

[MODE hoygan=ON] GRASIAS DE ANTEBRASO Y PERDONEN LAS DISKULPAS :P [/MODE]

[JavierB]

Hola Crazy_Xavy

Ten en cuenta que JavaScript distingue mayúsculas de minúsculas:

Código:

this.Id

También deberías poner onclick en minúsculas.

Saludos,

[Crazy_Xavy]

Maldita sea... Muchísimas gracias, tanto rollo por una simple mayúscula.

Más dudas, ya que es posible hacerlo así: ¿Cómo defino una función para que vaya al id que yo quiero?
Es decir, quiero una función para que me haga algo, y que ese algo sea en la id del <div> que he hecho onclick.

En otras palabras, que la función me reconozca que he hecho click en la celda "00" si hago click en esa celda.

Algo así como

Código PHP:

  function ci()
 { 
   document.getElementById('ij').innerHTML += "Aloja" 
 }  
   

Y luego, al hacer un onclick=aloja(), que reconozca que esa i y esa j son las de esa celda en particular.

PD: Un poco offtopic, ¿hay algún editor de códico que te recuerde estas boberías? :P

[David]

Puedes usar event.target (.srcElement para Internet Explorer) o pasar el id por parámetro a la función.

[Crazy_Xavy]

¡Muchísimas gracias por tus respuestas David, ya casi lo he terminado gracias a tu ayuda!

Sólo tengo una duda más. Pensaba abrir otro hilo para hacer la pregunta, pero está bastante relacionada con este.

Para hacer que al picar en una celda se me cambie un número he creado una función:

Código PHP:

  function chn(event) 
{ 
    b = event.target.id 
    document.getElementById(b).innerHTML="1" 
}  
   

En teoría, al picar sobre una celda, estoy diciendo que donde haya una id igual a la de la celda, me escriba el número 1. Y sí, se me escribe un 1 en la celda, pero no donde quiero que me lo ponga (que también tiene esa misma ID:

Código PHP:

  <span id="+h+""+k+">0</span>  
   

Si h y k corresponden a i y j del código anterior (comprobado con un alert(this.id) ), ¿por qué no se cambia también el innerHTML de estos?



Gracias de antemano :)

[David]

No puedes tener más de un elemento con el mismo id, el id debe ser único.

[Crazy_Xavy]

Entonces, ¿alguna sugerencia para hacer esto? Si los ids no son los mismos, no puedo indicarle dónde poner el número en el otro lugar.

[David]

Sólo tienes que agregar algún otro texto más al id, supongamos que el id del elemento sea: "elem1", entonces al span le das como id "elem1_span". Así puedes usar:

Código Javascript:

document.getElementById(b + "_span")....;
 

[Crazy_Xavy]

Ha quedado perfecto. Sólo tengo que toquetear algunas cosas para evitar pintar el fondo de negro :P

Muchísimas gracias David.