¿Ves que en una fila queda como un espacio en blanco? ¿Algo que faltaría "por rellenar"? A eso me refiero. Falta un colspan ahí.
Te dejo un ejemplo que he sacado tras unos cuantos intentos de ensayo-error. Agrega colspan predeterminadamente a la celda de la izquierda, pero si no existe lo agrega a la de la derecha. Si la celda está sola en la fila elimina la fila entera:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
</style>
</head>
<body>
<TABLE border="1">
<TBODY>
<TR>
<TD>.</TD>
<TD>.</TD>
<TD>.</TD>
</TR>
<TR>
<TD>.</TD>
<TD id="uno"> soy uno </TD>
<TD>.</TD>
</TR>
<TR>
<TD id="dos"> soy dos</TD>
<TD>.</TD>
<TD>.</TD>
</TR>
<TR>
<TD>.</TD>
<TD>.</TD>
<TD id="tres"> soy tres </TD>
</TR>
<TR>
<TD id="cuatro" colspan="3"> soy cuatro </TD>
</TR>
<TR>
<TD>.</TD>
<TD id="cinco"> soy cinco</TD>
<TD id="seis"> soy seis </TD>
</TR>
<TR>
<TD id="siete"> soy siete </TD>
<TD id="ocho"> soy ocho </TD>
<TD>.</TD>
</TR>
<TR>
<TD id="nueve"> soy nueve </TD>
<TD id="diez"> soy diez </TD>
<TD id="once" > soy once </TD>
</TR>
<TR>
<TD rowspan="2" id="doce"> soy doce </TD>
<TD>.</TD>
<TD>.</TD>
</TR>
<TR>
<TD>.</TD>
<TD>.</TD>
</TR>
</TBODY>
</TABLE>
<button onclick="f('uno')"> Elimina 'uno' </button><br/>
<button onclick="f('dos')"> Elimina 'dos' </button><br/>
<button onclick="f('tres')"> Elimina 'tres' </button><br/>
<button onclick="f('cuatro')"> Elimina 'cuatro' </button><br/>
<button onclick="f('cinco')"> Elimina 'cinco' </button> <button onclick="f('seis')"> Elimina 'seis' </button><br/>
<button onclick="f('siete')"> Elimina 'siete' </button> <button onclick="f('ocho')"> Elimina 'ocho' </button><br/>
<button onclick="f('nueve')"> Elimina 'nueve' </button>
<button onclick="f('diez')"> Elimina 'diez' </button>
<button onclick="f('once')"> Elimina 'once' </button><br/><br/>
<button onclick="f('doce')"> Elimina 'doce' </button>
<script type="text/javascript">
<!--
function f(idCelda) {
var laCelda = document.getElementById(idCelda);
try { // Predeterminado: aumentar la anterior
// Obtenemos la celda anterior, no el nodo de texto
var anterior = laCelda.previousSibling;
while( anterior.nodeType!=1 )
anterior = anterior.previousSibling;
// aumentamos el colSpan
anterior.colSpan = anterior.colSpan ? parseInt(anterior.colSpan)+1 : "2";
// (manteniendo lo que ya teníamos acumulado)
if( laCelda.colSpan )
anterior.colSpan = (parseInt(anterior.colSpan) -1) + parseInt(laCelda.colSpan);
} catch(err) { //No hay anterior, quizás hay siguiente
try {
// Obtenemos la celda siguiente, no el nodo de texto
var siguiente = laCelda.nextSibling;
while( siguiente.nodeType!=1 )
siguiente = siguiente.nextSibling;
// aumentamos el colSpan
siguiente.colSpan = siguiente.colSpan ? parseInt(siguiente.colSpan)+1 : "2";
// (manteniendo lo que ya teníamos acumulado)
if( laCelda.colSpan )
siguiente.colSpan = (parseInt(siguiente.colSpan) -1) + parseInt(laCelda.colSpan);
} catch(err2) { // No hay siguiente: No hay ni anterior ni siguiente, la celda está sola, eliminar la fila
var padre = laCelda.parentNode;
padre.parentNode.removeChild(padre);
}
}
laCelda.parentNode.removeChild(laCelda);
}
// -->
</script>
</body>
</html>
Púlsa los botones en el orden que quieras: Siempre va a funcionar, es muy dinámico.
Falta soporte para el
rowspan (doce): si la celda a eliminar contiene varias filas ya es más complicado, hay que abarcarlas a las dos. Tendríamos que identificarlas y hacer más aplicaciones de
colspan... Si tiene
rowspan y
colspan a la vez no quiero ni pensarlo...
Bueno, espero que te guste y veas cómo podemos manejar tablas a nuestro antojo.
PD: No te abrumes por el script, entenderlo sin más es complicado porque lo he hecho sobre la marcha. Si quieres pon un par de
alert() para saber los datos que tenemos y los datos que he cambiado, ha sido más fácil de lo que parece, pero es dificil saber lo que hace a primera vista.
Un saludo.
