Sentido Web

Laboratorio: borrar filas de una tabla en Javascript

16:00 H (CET)| Temas: Javascript · Laboratorio

Viendo el otro día la entrada de aNieto2K, recordé el efecto que usa Wordpress para resaltar que se ha borrado una fila de una tabla en las herramientas de administración. Se trata de pintar progresivamente la fila en rojo y luego borrarla, consiguiendo así que el usuario se percate de qué ha pasado.

Vamos a explicar cómo conseguir este efecto, para ello antes vamos a indicar que para que sea más genérico, los colores de las filas (que son distintos para las filas alternas) van a venir por estilos de clase, no en la propia definición de la etiqueta.

Lo primero que tenemos que hacer es ver los estilos que vamos a usar:

tr {
  background: #FFFFFF;
}
/* Para las filas alternas */
tr.par {
  background: #9BCFCF;
}

Después tendremos que modificar las filas, primero cambiando el estilos de las filas alternas y luego añadiendo un id y el evento onclick.

// Modifica la tabla para diferenciar las filas
function transformar(ok) {
  // Obtengo la tabla
  var tabla = document.getElementById("tabla");
  
  // Guardo los datos de la tabla y marco filas alternas
  for (var i=1; i<tabla.rows.length; i++) {
    if (i%2 == 0) {
      tabla.rows[i].className = "par";
    } else {
      // Se tiene que borrar para cuando se redibuja
      tabla.rows[i].className = ""; 
    }
    // La primera vez se llama a la función con ok=true
    // para crear los id y asignar el evento onclick
    if (ok) {
      var id = "TR"+Math.random();
      tabla.rows[i].id = id;
      // Se pone en la variable "concurrencia" el id
      // para que no se pueda ejecutar la función "borrarFila"
      // con otra fila
      tabla.rows[i].onclick = function() {concurrencia=id; borrarFila(this.id, 100);}
    }
  }
}

Después viene la parte que se encarga de borrar las filas, se irá haciendo una llamada sucesiva con un contador que decrementa. El contador llevará el valor del porcentaje de degradado que se está mostrando. Cuando acabe el degradado, se eliminará la fila y se redibujarán las filas alternas.

// Color final que se quiere mostrar
var Rfinal = 255;
var Gfinal = 0;
var Bfinal = 0;
// Incremento en el degradado
var inc = 10;
// Para evitar que se pulsen dos filas a la vez y pueda dar problemas
var concurrencia = "";

// Borra la fila: primero cambiar de color y luego borra la fila
function borrarFila(id, porc) {
  if (concurrencia != id) {
    var obj = document.getElementById(id);
    // Obtengo el color de fondo
    var estilo = obj.tagName + (obj.className == ""? "":"."+obj.className);
    
    // Si el objeto no tiene color de fondo
    // lo buscamos dentro de los estilos
    // y si no se le asigna el blanco
    if (obj.style.backgroundColor == "") {
      var estilos = document.styleSheets;
      for (var i=0; i<estilos.length; i++) {
        var rules = (estilos[i].cssRules)?estilos[i].cssRules:estilos[i].rules;
        for (j=0; j<rules.length; j++) {
          if (rules[j].selectorText.toLowerCase() == estilo.toLowerCase()) {
            obj.style.backgroundColor = rules[j].style.backgroundColor;
          }   
        }
      }
      if (obj.style.backgroundColor == "") {
        obj.style.backgroundColor = "#FFFFFF";
      }
    }
    if (obj.style.backgroundColor.charAt(0) == "#") {
      obj.style.backgroundColor = cambiaEstiloHex2Dec(obj.style.backgroundColor);
    }
    
    // Si se está efectuando el degradado de colores
    if (porc >= 0) {
      // Se calcula el nuevo color, se trata de
      // el incremento o decremento de color
      // del color inicial (o actual) hacia el final
      var colores = obj.style.backgroundColor.match(/rgb\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\)/);
      var RGB = "rgb(";
      RGB += (porc==0? Rfinal:parseInt(parseInt(colores[1])-(colores[1]-Rfinal)/(porc/inc)))+",";
      RGB += (porc==0? Gfinal:parseInt(parseInt(colores[2])-(colores[2]-Gfinal)/(porc/inc)))+",";
      RGB += (porc==0? Bfinal:parseInt(parseInt(colores[3])-(colores[3]-Bfinal)/(porc/inc)))+")";
      obj.style.backgroundColor = RGB;
      // Seguimos con el degradado
      setTimeout(function() {borrarFila(id, porc-inc);}, 30);
    } else {
      // Se ha acabado con el degradado
      // por lo que se borra
      obj.parentNode.removeChild(obj);
      // Se redibujan las filas alternas
      transformar();
      // Se libera el proceso
      concurrencia = "";
    }
  }
}

// Cambiar un color del estilo #RRGGBB por uno del tipo rgb(r, g, b)
function cambiaEstiloHex2Dec(valor) {
  var colores = valor.match(/\#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})/i);
  return "rgb("+hex2dec(colores[1])+","+hex2dec(colores[2])+","+hex2dec(colores[3])+")";
}

// Transforma un numero hexadecimal de dos 
// en uno decimal
function hex2dec(num) {
  var _hex = new Array();
  _hex["0"]=0; _hex["1"]=1; _hex["2"]=2; _hex["3"]=3; 
  _hex["4"]=4; _hex["5"]=5; _hex["6"]=6; _hex["7"]=7; 
  _hex["8"]=8; _hex["9"]=9; _hex["A"]=10; _hex["B"]=11; 
  _hex["C"]=12; _hex["D"]=13; _hex["E"]=14; _hex["F"]=15; 
  
  if (num.match(/([0-9A-F]){2}/i)) {
    return _hex[(num.charAt(0)+"").toUpperCase()]+_hex[(num.charAt(1)+"").toUpperCase()]*16;
  }
  
  return 0;
}

Ejemplo

Relacionados

• Lista de recursos Javascript (Miércoles, 17 Oct 2007)
• Tablecloth: estilo en tablas mediante Javascript (Jueves, 11 Oct 2007)