mover celdas

dieguicho · #1 (**permalink**) 29/08/2003, 09:33

tengo una tabla con algunas celdas
es posible moverlas? osea cambiarles el orden subirlas y bajarlas?
no encontre nada en gooogle please help!

Kaopectate · #2 (**permalink**) 29/08/2003, 13:07

Hola dieguicho.

Revisa el FAQ-101.

Saludos.

dieguicho · #3 (**permalink**) 29/08/2003, 13:59

si eso los ordena alfabeticamente
yo digo subir o bajar cada celda independiente no se si me explico bien

gracias por tu ayuda

furoya · #4 (**permalink**) 03/09/2003, 06:56

Hola dieguicho , Kaopectate :

Dijo dieguicho :

Cita:

yo digo subir o bajar cada celda independiente no se si me explico bien

Sí, bueno, más o menos...
Veamos. ¿seguro quieres mover celdas, o lo que quieres es mover filas?. ¿ ...o columnas?. Voy a suponer que son celdas.

¿Cómo las quieres mover?. ¿a cualquier parte de la tabla o cambiando una por otra? -ésto resolvería otra cuestíón : no se mueven las celdas sino sus contenidos-. Supongamos que tu tabla tiene 4 filas por 4 columnas, y que quieres poner la celda D4 entre las celdas A1 y B1; ésto nos dejaría una tabla con una fila de 5 celdas, una de 3 y el resto de 4; lo que nos obliga a reescribir todo el código para insertar los rowspan (o los colspan) donde correspondieren. Voy a suponer que quieres cambiar una celda por otra.

¿Qué mecánica vas a usar para que el usuario las mueva?. ¿Drag & Drop ?. ¿Click en la celda de origen, click en la de destino y que se intercambien?. ¿Un formulario donde ingresar las coordenadas?. Voy a elegir éste último.

<HTML>
<HEAD>
<TITLE> MOVER CELDAS.</TITLE>
<SCRIPT>
function mover(){

filOrigen=formulario.fil_1.options[formulario.fil_1.selectedIndex].value;
colOrigen=formulario.col_1.options[formulario.col_1.selectedIndex].value;
filDestino=formulario.fil_2.options[formulario.fil_2.selectedIndex].value;
colDestino=formulario.col_2.options[formulario.col_2.selectedIndex].value;

contOrigen=document.getElementById('tabla').rows[filOrigen].cells[colOrigen].innerHTML;
contDestino=document.getElementById('tabla').rows[filDestino].cells[colDestino].innerHTML;

document.getElementById('tabla').rows[filOrigen].cells[colOrigen].innerHTML=contDestino;
document.getElementById('tabla').rows[filDestino].cells[colDestino].innerHTML=contOrigen;
}
</SCRIPT>
<STYLE>
td{width:28pt; text-align:center}
tr{height:28pt;}
.negras{color:brown; font-weight:bold; font-family:cursive}
.blancas{color:burlywood; font-weight:bold; font-family:cursive}
.encabezados{font:900 8pt sans-serif; background:silver}
</STYLE>
</HEAD>
<BODY>
<form name=formulario>
Columna origen : <select name=col_1 accesskey="ñ" onchange="fil_1.focus()">
<option value=1>A
<option value=2>B
<option value=3>C
<option value=4>D
<option value=5>E
<option value=6>F
<option value=7>G
<option value=8>H
</select>
Fila origen : <select name=fil_1 onchange="col_2.focus()">
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
</select>
;
Columna destino : <select name=col_2 onchange="fil_2.focus()">
<option value=1>A
<option value=2>B
<option value=3>C
<option value=4>D
<option value=5>E
<option value=6>F
<option value=7>G
<option value=8>H
</select>
Fila destino : <select name=fil_2 onchange="mover_1.focus()">
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
</select>

<input name="mover_1" type=button onclick="mover(); col_1.focus()" value="Mover">
<p>
<table align=center border=1 cellpadding=0 cellspacing=0 id=tabla> <colgroup span=9> <col class=encabezados> <tr class=encabezados>
<td title="Reordenar"><a href="javascript:history.go(0)" style="text-decoration:none; font-weight:none;font-size:16pt">&uarr;&darr;</a></td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> <td>H</td>
</tr><tr>
<td>1</td> <td><b><font class=blancas>T</font></td> <td><b><font class=blancas>C</font></td> <td><b><font class=blancas>A</font></td> <td><b><font class=blancas>D</font></td> <td><b><font class=blancas>R</font></td> <td><b><font class=blancas>A</font></td> <td><b><font class=blancas>C</font></td> <td><b><font class=blancas>T</font></td>
</tr><tr>
<td>2</td> <td><b><font class=blancas>p</font></td> <td><b><font class=blancas>p</font></td> <td><b><font class=blancas>p</font></td> <td><b><font class=blancas>p</font></td> <td><b><font class=blancas>p</font></td> <td><b><font class=blancas>p</font></td> <td><b><font class=blancas>p</font></td> <td><b><font class=blancas>p</font></td>
</tr><tr>
<td>3</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td>
</tr><tr>
<td>4</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td>
</tr><tr>
<td>5</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td>
</tr><tr>
<td>6</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td>
</tr><tr>
<td>7</td> <td><b><font class=negras>p</font></td> <td><b><font class=negras>p</font></td> <td><b><font class=negras>p</font></td> <td><b><font class=negras>p</font></td> <td><b><font class=negras>p</font></td> <td><b><font class=negras>p</font></td> <td><b><font class=negras>p</font></td> <td><b><font class=negras>p</font></td>
</tr><tr>
<td>8</td> <td><b><font class=negras>T</font></td> <td><b><font class=negras>C</font></td> <td><b><font class=negras>A</font></td> <td><b><font class=negras>D</font></td> <td><b><font class=negras>R</font></td> <td><b><font class=negras>A</font></td> <td><b><font class=negras>C</font></td> <td><b><font class=negras>T</font></td>
</tr></table>
</form>
</BODY>
</HTML>

El ejemplo se explica solo, pero te doy un adelanto : si, p.e., quieres mover el Caballo de la Dama desde su posición B1 hasta la posición C3, los select deberían estar en B 1 C y 3 respectivamente.

Lo que está en verde es parte del código y el resto es adorno.

Saludos
furoya.

P.D. : Alguien me hizo notar que es más fácil ingresar coordenadas desde el teclado, y que bien podía ahorrarle el [ TAB ] al usuario. Con [ ALT ] [ Ñ ] se inicia la secuencia, y con cada cambio en los select se avanza al siguiente; para saltear un campo sí se usa [ TAB ] y el botón se pulsa con la barra espaciadora.

furoya · #5 (**permalink**) 12/09/2003, 12:31

Mi estimado dieguicho,

No sé si ya había dicho en estos foros cuanto odio el BBCode, si no lo hice, aprovecho la oportunidad. Corregí -o al menos eso espero- algunos errores del código anterior y le agregué un accesskey que no fue un error de la transcripción automática sino mío propio de mí.

Acá te dejo el código que te había mencionado ( NOTA : en este mensaje va a haber referencias a un mensaje privado ); no se parece a lo que estás necesitando, pero se me supone más fácil de adaptar a otros navegadores que no sean el IE.

<HTML>
<HEAD>
<STYLE>
#tabla_1{font-size:20px}
#flechas{color:yellow; background:black; cursor:hand; font:900 20px sans-serif; width:20px; text-align:center}
</STYLE>
<SCRIPT>
var o, d, c1, c2, c3, p1, p2, p3;

function cortaF(){
flechas.style.cursor="move";

fO=window.event.srcElement.parentElement;

o=fO.rowIndex; /*sólo para confirmar valores en input*/

c1=fO.cells[1].innerHTML; /*contenidos de cada celda origen*/
c2=fO.cells[2].innerHTML;
c3=fO.cells[3].innerHTML; /* */

vA.value=c1; /*sólo para confirmar valores en input*/
vB.value=c2;
vC.value=c3; /* */
}

function pegaF(){
flechas.style.cursor="hand";

fD=window.event.srcElement.parentElement;

d=fD.rowIndex; /*sólo para confirmar valores en input*/

p1=fD.cells[1].innerHTML; /*contenidos de cada celda destino*/
p2=fD.cells[2].innerHTML;
p3=fD.cells[3].innerHTML; /* */

v1A.value=p1; /*sólo para confirmar valores en input*/
v1B.value=p2;
v1C.value=p3;
v2.value=o;
v3.value=d; /* */

tabla_1.rows.item(d).cells.item(1).innerHTML=c1;
tabla_1.rows.item(d).cells.item(2).innerHTML=c2;
tabla_1.rows.item(d).cells.item(3).innerHTML=c3;

tabla_1.rows.item(o).cells.item(1).innerHTML=p1;
tabla_1.rows.item(o).cells.item(2).innerHTML=p2;
tabla_1.rows.item(o).cells.item(3).innerHTML=p3;

}

</SCRIPT>
</HEAD>
<BODY>
<h2>Intercambia filas con <i>Drag & Drop</i> en las flechas de la primer columna. </h2>

<table><td style="line-height:18pt">
Contenido origen : <br>Contenido destino : <br>Fila origen : <br>Fila destino : </td><td><input id=vA><input id=vB><input id=vC><br>
<input id=v1A><input id=v1B><input id=v1C><br>
<input id=v2><br>
<input id=v3>
</td></table><p>

<table id=tabla_1 align=center border=1> <colgroup span=4> <col id=flechas> </colgroup>
<tr>
<td title="Arrastre las flechas para mover filas." unselectable="on" onmousedown=cortaF() onmouseup=pegaF()>&#8597</td> <td>Alfa </td> <td> --- A --- </td> <td> --- a --- </td>
</tr><tr>
<td title="Arrastre las flechas para mover filas." unselectable="on" onmousedown=cortaF() onmouseup=pegaF()>&#8597</td> <td>Bravo </td> <td> --- B --- </td> <td> --- b --- </td>
</tr><tr>
<td title="Arrastre las flechas para mover filas." unselectable="on" onmousedown=cortaF() onmouseup=pegaF()>&#8597</td> <td>Charly </td> <td> --- C --- </td> <td> --- c --- </td>
</tr><tr>
<td title="Arrastre las flechas para mover filas." unselectable="on" onmousedown=cortaF() onmouseup=pegaF()>&#8597</td> <td>Delta </td> <td> --- D --- </td> <td> --- d --- </td>
</tr>
</table>

</BODY>
</HTML>

Por supuesto que este código se puede optimizar usando loops y algunos length que eviten escribir una línea para cada celda y/o columna; pero me pareció que así se veía más claro el funcionamiento y, después de todo, éste no es un depósito de cut & paste sino un Foro donde venir a aprender sobre javascript.

Ah!. Y si te gustó el primer código como para juegos; éste te tiene que gustar más :

<HTML>
<HEAD>
<STYLE>
#tabla_3 {height:200pt; width:200pt}
#tabla_3 td{border:4pt outset gold; width:40pt; height:40pt; text-align:center}
</STYLE>

<SCRIPT>
var cOUno;
var cODos="";

function mover2(){
if(cODos==""){
document.getElementById("tabla_3").style.cursor="m ove";
cOUno=window.event.srcElement;
while(cOUno.tagName!="TD"){cOUno=cOUno.parentEleme nt}
cODos=cOUno.innerHTML;
cOUno.style.filter="alpha(opacity=30);moz-opacity:0.3";}
else{
document.getElementById("tabla_3").style.cursor="" ;
cDUno=window.event.srcElement;
while(cDUno.tagName!="TD"){cDUno=cDUno.parentEleme nt}
cDDos=cDUno.innerHTML;
cDUno.innerHTML=cODos;
cOUno.innerHTML=cDDos;
cODos="";
cOUno.style.filter="";}
}
</SCRIPT>
</HEAD>
<BODY>

<h2>Intercambia celdas con click. </h2>

<table onclick=mover2() id=tabla_3 border=0 cellpadding=0 cellspacing=0 align=center>



<tr>
<td><font face=fantasy size=6 color=orange>K</font></td> <td><b><big>8</big></b></td> <td><span style="background:red;width:24;height:24"></span></td> <td>&nbsp;</td>
</tr><tr>
<td><span style="background:fuchsia;width:24;height:24"></span></td> <td>&nbsp;</td> <td><font face=fantasy size=6 color=purple>J</font></td> <td><b><big>3</big></b></td>
</tr><tr>
<td><font face=fantasy size=6 color=maroon>F</font></td> <td><b><big>5</big></b></td> <td><span style="background:blue;width:24;height:24"></span></td> <td>&nbsp;</td>
</tr><tr>
<td><span style="background:pink;width:24;height:24"></span></td> <td><font face=fantasy size=6 color=teal>Z</font></td> <td>&nbsp;</td> <td><b><big>4</big></b></td>
</tr>
</table>

</BODY>
</HTML>

saludos
furoya

furoya · #6 (**permalink**) 21/09/2003, 01:48

Hola de nuevo :

No te preocupes, dieguicho, por que los mensajes se hagan viejos; como no vengo a estos foros tanto como quisiera, me tomé la costumbre de suscribirme a las discusiones en las que participo, así cuando entro ya sé donde se agregaron mensajes. De cualquier forma, ahora los estoy visitando más seguido, una y hasta dos veces por semana -para alguien a quien le cierran las cuentas de WEBMail por falta de uso, y que tiene que validar su nombre cada vez que ingresa a otros foros porque ya no lo reconocen, una vez por semana es como quedarse a vivir-.

Vamos al tema. La tabla funciona perfectamente; es así nomás. Cada vez que haces un click en subir la celda se desplaza una fila hacia arriba, y, por supuesto, la que estaba arriba ocupa su lugar. Con bajar hace lo mismo, pero hacia abajo.
La única diferencia es que si quieres bajar la última celda aparece un aviso de que es imposible; mientras que si quieres subir la primera, aproveché que el escript no interpreta el valor -1 como un error para desplazarla hasta el último lugar; si sigues haciendo click, en algún momento vas a recomenzar la secuencia.

Ahora bien, si lo que estás buscando es que subir lleve la celda hasta el tope de la tabla y bajar hasta el final, colapsando el lugar vacante, el código es así:
( agregue algunas filas para hacer el efecto más evidente )

<HTML>
<HEAD>
<TITLE> </TITLE>
<SCRIPT>
function Bajar(){
celda = window.event.srcElement.parentElement;
celda1 = celda.innerHTML;
celda2 = celda.parentElement.rowIndex;
tabla.deleteRow(celda2);
celda3 = tabla.insertRow(tabla.all.tags("TR").length);
celda4 = celda3.insertCell();
celda4.innerHTML = celda1;
}

function Subir(){
celda = window.event.srcElement.parentElement;
celda1 = celda.innerHTML;
celda2 = celda.parentElement.rowIndex;
tabla.deleteRow(celda2);
celda3 = tabla.insertRow(0);
celda4 = celda3.insertCell();
celda4.innerHTML = celda1;
}

</SCRIPT>
<STYLE>
A{color:#0000CC; text-decoration:underline; cursor:hand}
A{cursor:pointer}
</STYLE>
</HEAD>
<BODY>

<table border="0" cellspacing="2" cellpadding="2" id="tabla">
<tr>
<td> nombre:<br>
<input type="text" name="textfield">
<A onclick=:Subir()>subir</A> / <A onclick="Bajar()">bajar</A></td>
</tr>
<tr>
<td>apellido:<br>
<input type="text" name="textfield">
<A onclick=:Subir()>subir</A> / <A onclick="Bajar()">bajar</A> </td>
</tr>
<tr>
<td>email:<br>
<input type="text" name="textfield">
<A onclick=Subir()>subir</A> / <A onclick="Bajar()">bajar</A> </td>
</tr>
</table>
</BODY>
</HTML>

Pero si quieres que la celda desplazada "arrastre" a las otras, haciendo que las filas que desaparecen por un extremo reaparezcan por el otro, el código es así :

<HTML>
<HEAD>
<TITLE> </TITLE>
<SCRIPT>
var celda,contenidoCelda,fila;

function Bajar(){
celda = window.event.srcElement.parentElement;
contenidoCelda = celda.innerHTML;
fila = celda.parentElement.rowIndex;
for(c=tabla.all.tags("TR").length; c>fila+1; c--){MoverFinal()}
/*MoverFinal()*/
}

function MoverFinal(){
/*if(fila < tabla.all.tags("TR").length-1){*/
ultimaCelda = tabla.cells(tabla.all.tags("TR").length-1);
contenidoUltimaCelda = ultimaCelda.innerHTML;
ultimaFila = ultimaCelda.parentElement.rowIndex;
tabla.deleteRow(ultimaFila);
nuevaFila = tabla.insertRow(0);
nuevaCelda = nuevaFila.insertCell();
nuevaCelda.innerHTML = contenidoUltimaCelda;
/*fila = fila+1;
setTimeout("MoverFinal()",1000);}*/
}

function Subir(){
celda = window.event.srcElement.parentElement;
contenidoCelda = celda.innerHTML;
fila = celda.parentElement.rowIndex;
for(c=0;c<fila;c++){MoverTope()}
/*MoverTope()*/
}

function MoverTope(){
/*if(fila > 0){*/
primeraCelda = tabla.cells(0);
contenidoPrimeraCelda = primeraCelda.innerHTML;
primeraFila = primeraCelda.parentElement.rowIndex;
tabla.deleteRow(primeraFila);
nuevaFila = tabla.insertRow(primeraFila-1);
nuevaCelda = nuevaFila.insertCell();
nuevaCelda.innerHTML = contenidoPrimeraCelda;
/*fila = fila-1;
setTimeout("MoverTope()",1000);}*/
}

</SCRIPT>
<STYLE>
A{color:#0000CC; text-decoration:underline; cursor:hand}
A{cursor:pointer}
</STYLE>
</HEAD>
<BODY>

<table border="0" cellspacing="2" cellpadding="2" id="tabla">
<tr>
<td> nombre:<br>
<input type="text" name="textfield">
<A onclick=:Subir()>subir</A> / <A onclick="Bajar()">bajar</A></td>
</tr>
<tr>
<td>apellido:<br>
<input type="text" name="textfield">
<A onclick=:Subir()>subir</A> / <A onclick="Bajar()">bajar</A> </td>
</tr>
<tr>
<td>email:<br>
<input type="text" name="textfield">
<A onclick=Subir()>subir</A> / <A onclick="Bajar()">bajar</A> </td>
</tr>
<tr>
<td>página WEB:<br>
<input type="text" name="textfield">
<A onclick=Subir()>subir</A> / <A onclick="Bajar()">bajar</A> </td>
</tr>
<tr>
<td>mensajero:<br>
<input type="text" name="textfield">
<A onclick=Subir()>subir</A> / <A onclick="Bajar()">bajar</A> </td>
</tr>
</table>
</BoDY>
</HTML>

Esta última tabla desplaza las celdas de una vez. Si quieres ver cómo lo hace lentamente, debes habilitar el código azul ( que está oculto ), y ocultar el código verde. El efecto es inútil, pero se ve lindo.

La tercera es la vencida.

saludos
furoya

NOTA FINAL : traté de hacer el escript más comprensible usando variables descriptivas y hasta código redundante, pero después de leerlo me parece que no tuve éxito. No lo limpié porque lo terminé recién y no quise demorar más en postearlo.