Subir / Bajar filas en una tabla

Inicio JavaScript Subir / Bajar filas en una tabla

Categorias

Nuevos Articulos

Nuevos Comentarios

Jueves, 31-03-2011 18:18 - Leer comentarios - Comentar

Voy a tratar de explicar un sencillo código para poder mover (subir o bajar) filas en una tabla. Podeis bajarlo a vuestro ordenador Descargar.
La tabla debe tener una etiqueta < tbody id="cuerpo">

Texto plano

...

Para empezar, crearemos dos variables globales, que utilizaremos en varias funciones

Texto plano

var tab;
var filas;

Cada imagen debe tener un evento onclick para que, cuando se pulse, se ejecute el código correspondiente.
Pero es bastante aburrido tener que añadirlo "a mano", así que vamos a dejar que JavaScript haga el "trabajo sucio" creando una función que llamaremos en el event onload del body ()

Texto plano

function iniciarTabla() {
  tab = document.getElementById('cuerpo'); // 1
  filas = tab.getElementsByTagName('tr'); // 2
  for (i=0; ele = filas[i]; i++) { // 3
    ele.getElementsByTagName('img')[0].onclick = function() { mover(this,-1) }
    ele.getElementsByTagName('img')[1].onclick = function() { mover(this,1) }
  }
  mostrarOcultar(); // 4
}

1- Asignamos a la variable tab el elemento que id="cuerpo" que es el cuerpo de la tabla, sobre el que vamos a trabajar
2- En la variable filas cargamos un array que contiene todas las filas de la tabla
3- Recorremos todas las filas de la tabla y en las dos siguiente líneas de código, asignamos el evento onclick a la imagen, para que llame a la función mover, pasándole los argumentos this (la propia imagen) y un valor, que será -1 para subir una fila o 1 para bajar
4- Llamamos a la función mostrarOcultar, que se explica a continuación

Texto plano

function mostrarOcultar() {
  for (i=0; ele = filas[i]; i++) {
    ele.getElementsByTagName('img')[0].style.visibility = (i==0) ? 'hidden' : 'visible';
    ele.getElementsByTagName('img')[1].style.visibility = (i==filas.length-1) ? 'hidden' : 'visible';
  }
}

Volvemos a recorrer la tabla, para buscar las imágenes que hay en cada fila.
A la primera imagen (subir) la ocultamos si se encuentra en la primera fila, porque es imposible subir una fila que ya está arriba del todo. La segunda imágen (bajar) se oculta si está en la última fila, por el mismo motivo
La razón de poner este código en una función aparte, en lugar de incluirlo en iniciarTabla() es que cuando se muevan las filas, habrá que volver a mostrar/ocultar las imágenes adecuadas.
Ya sólo queda la parte más importante del código, la función que mueve las filas.

Texto plano

function mover(obj,num) {
  fila = obj.parentNode.parentNode; // 1
  for (i=0; ele = tab.getElementsByTagName('tr')[i]; i++) // 2
    if (ele == fila) {numFila=i; break} // 2
  copia = filas[numFila].cloneNode(true); // 3
  copia.getElementsByTagName('img')[0].onclick = function() { mover(this,-1) } // 4
  copia.getElementsByTagName('img')[1].onclick = function() { mover(this,1) } // 4

  tab.removeChild(filas[numFila]); // 5
  numFila += num; // 6
  if (numFila > filas.length-1) // 7 
    tab.appendChild(copia);
  else
    tab.insertBefore(copia,filas[numFila]);
  mostrarOcultar(); // 8
}

1- Averiguamos en qué fila está la imagen que se ha pulsado. La imagen está dentro de una celda que, a su vez está dentro de una fila. Por eso se usa dos veces parentNode.
2- Se recorren las filas de la tabla y cuando coincide la fila de la tabla, con la fila donde se ha pulsado, se crea la variable numFila.
3- Se copia la fila completa, con todo lo que tiene dentro (celdas e imágenes). Fijaros que hemos utilizado cloneNode(true).
4- Hay que volver a asignar el evento onclick a las imagenes que hemos copiado.
5- Borramos la fila.
6- Modificamos el valor de la variable numFila para que sea un número más o menos dependiendo de si sube o baja la fila. Recordar que a la función se ha pasado el argumento num que vale 1 ó -1
7- Si numFila es mayor que el número de filas de la tabla, se añade la copia que había hecho en la línea 3. Si es menor se inserta en el lugar adecuado.

Programación Goibela

Categorias

Nuevos Articulos

Nuevos Comentarios

Subir / Bajar filas en una tabla

Tags

Comentarios

RSS Feeds