Laboratorio: borrar filas de una tabla en Javascript

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