Foros del Web - Ver Mensaje Individual

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.