Laboratorio: borrar filas de una tabla en HTML y en la BD

Ayer contábamos como borrar una fila de una tabla en HTML, y en los comentarios, Escael nos preguntaba cómo se podría hacer para que también se borrara de la base de datos.

Pues siguiendo con el modo en que se hace en la administración de WordPress, primero haremos el difuminado del color actual de la fila al color rojo y mientras se realiza el borrado en la tabla de la base de datos, haremos que parpadee el color de la fila. Cuando se haya realizado el borrado en la tabla de la base de datos, se eleminará la fila de la tabla HTML y se mostrará un mensaje de aviso de que se ha borrado de la BD.

El código es casi el mismo que en la entrada anterior, salvo que en esta entrada se incluye AJAX para la ejecución del script PHP que borra el registro de la tabla. A parte, también habrá una función nueva que se encargará de hacer que parpadee la fila, siendo necesario guardar dos atributos en la fila, uno con el color inicial y otro con el final, para poder alternarlos.

El código Javascript que varía respecto a la versión anterior lo remarcaré en negrita.

// 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 = "";
// 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);}
}
}
}
// 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);
}
// Añadimos los colores para el parpadeo
if (!obj.getAttribute("color1")) {
  obj.setAttribute("color1", obj.style.backgroundColor);
}
if (!obj.getAttribute("color2")) {
  obj.setAttribute("color2", "rgb("+Rfinal+","+Gfinal+","+Bfinal+")");
}
// 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);}, 50);
} else {
// Se ha acabado con el degradado
// Se libera el proceso
concurrencia = "";
// Se borra el registro en la BD
parpadear(obj.id);
borradoBD(obj);
}
}
}
// 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;
}

function parpadear(id) {
var obj = document.getElementById(id);
if (obj) {
// Cambio el color actual de fondo por el otro
if (obj.getAttribute("color1") == obj.style.backgroundColor) {
obj.style.backgroundColor = obj.getAttribute("color2");
} else {
obj.style.backgroundColor = obj.getAttribute("color1");
}
// Sigo cambiando el color
var timeout = setTimeout("parpadear('"+id+"')", 200);
}
}
// Creación del objeto AJAX
function ajaxobj() {
try {
_ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
_ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
_ajaxobj = false;
}
}
if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {
_ajaxobj = new XMLHttpRequest();
}
return _ajaxobj;
}
// Llama mediante AJAX al borrado de la fila
function borradoBD (obj) {
ajax = ajaxobj();
ajax.open("GET", "borradoBD.php", true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
obj.parentNode.removeChild(obj);
// Se redibujan las filas alternas
transformar();
alert(ajax.responseText);
}
}
ajax.send(null);
}

Código ejemplo