Foros del Web - Ver Mensaje Individual

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">

<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>T</td> <td>C</td> <td>A</td> <td>D</td> <td>R</td> <td>A</td> <td>C</td> <td>T</td>
</tr><tr>
<td>2</td> <td>p</td> <td>p</td> <td>p</td> <td>p</td> <td>p</td> <td>p</td> <td>p</td> <td>p</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>p</td> <td>p</td> <td>p</td> <td>p</td> <td>p</td> <td>p</td> <td>p</td> <td>p</td>
</tr><tr>
<td>8</td> <td>T</td> <td>C</td> <td>A</td> <td>D</td> <td>R</td> <td>A</td> <td>C</td> <td>T</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.