moverse por tabla con DOM

[derkenuke]

Bueno, es simplemente asi:

Tengo eventos onclick en todas las celdas de una tabla. Mediante una funcion quiero acceder a todas las celdas a su alrededor y modificarles el borde (no problem lo del borde :·)

Bueno, para acceder a las celdas de la derecha y de la izquierda de la celda actual es facil (this es la celda en la que se hizo click):

Código PHP:

  this.previousSibling 
   

Y para la de la derecha con next, vale eso es facil (hasta tengo hecha la comprobacion para ver si es la primera/ultima celda la pulsada para que no haya errores ).

Bueno el problema viene cuando quiero acceder a, por ejemplo, la celda superior. No se me ocurre nada de nada, seguro que existe una solucion que no sea muy engorrosa, ¿verdad?

[caricatos]

Hola derkenuke:

No te vale la colección de celdas de la tabla :

con esto:
document.getElementById("tabla").getElementsByTagN ame("td")
consigues el array de las celdas dela tabla con id=tabla...

Para obtener el nodo padre tienes parentNode, pero sería el tag "tr", y el inmediato superior sería el tag "Tbody"

Pero tienes que tener mucho cuidado con esta forma de buscar elementos ya que en ocasiones un espacio en blanco se considera un nodo... tendrías que consultar los nodeName y controlar que sean nodos "TD"... al menos los parenNode tienen que ser etiquetas normales.

Saludos

[derkenuke]

Si pero con eso ¿que puedo hacer?. He pensado en contar en el <tr> que estoy (seria un blucle: ir probando desde el primero hasta el que coincida con el tr actual) y luego contar el td actual de la misma manera. Seleccionaria el trActual-1 y la misma celda (la tabla es cuadrada). ¿Funcionara?

De todas maneras tendre cuidado con los nodosde texto, de momento no me han dadoproblemas.

Muchas gracias caricatos!

[derkenuke]

Bueno ya lo he solucionado, modo chapuza, pero funciona. Le he puesto a cada celda propiedades de fila y columna (las primeras son 0, como indices en un array).

De esta manera cuando hago click en una celda, por ejemplo para activar el borde de abajo de la celda superior:

Código PHP:

  if(this.fila>0)    //si no es el <tr> de arriba del todo. Va asi: this.<tr>.<tbody>.<tr anterior>.<td mismo>.style..
    this.parentNode.parentNode.childNodes[this.fila-1].childNodes[this.columna].style.borderBottom="solid 1px "+col; 
   

Funciona, no es lo mas elegante pero... Si alguien conoce mejor manera de hacerlo que avise por favor.

[caricatos]

Hola otra vez:

Me alegro que te funcione, pero tengo que admitir que no llegué a enterarme de tu intención (Tampoco tengo mucho tiempo últimamente)...

Pero me parece que es una solución válida... Usar un atributo en una etiqueta, que sea representativo es ni más ni menos lo que yo haría...

Sé que has visto el inspector DOM... y para interactuar entre marcos, he añadido nuevos atributos a los elementos...

Si alguien conoce mejor manera de hacerlo que avise por favor

Saludos

[derkenuke]

En efecto, lo he leido . Me lo repasare para entender eso.

Muchas gracias por tu tiempo.