... viene del mensaje anterior.
El segundo código es totalmente distinto. La idea es poner una tabla a la cual se le extrae el contenido para guardarlo en un
Array BiDi ( a modo de Base de Datos ) y luego se la elimina.
El siguiente paso es escribir con JS una nueva tabla con una cantidad menor de filas y columnas, y 4 botones que "rellenan" esa tabla manteniendo el orden que tenían los datos en la original. Y, por supuesto, acomodando los encabezados.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>DESPLAZA TABLA.</title>
<script language= "JavaScript">
var contTab =new Array();
var contTabN ="";
var columnas = 5; /*CANTIDAD FINAL DE COLUMNAS*/
var filas = 5; /*CANTIDAD FINAL DE FILAS*/
var filasI = 0;
var columnasI = 0;
var paso = 1;
var C, F, tabla, totTr, totTd, repite ;
function inicio(){
tabla = document.getElementById("contieneTabla");
var contTab0 = tabla.innerHTML ;
totTr = tabla.getElementsByTagName( "tr").length;
totTd = tabla.getElementsByTagName( "tr").item(0).getElementsByTagName( "td").length;
if((columnas>totTd) || (filas>totTr)){
alert("ERROR en la cantidad de filas y/o columnas.");
}
else{
for(C=0; C<totTr; C++){
contTab[C]= new Array(totTd);
for( F=0; F<totTd; F++){
contTab[C][F]= tabla.getElementsByTagName( "tr").item(C).getElementsByTagName(
"td").item(F).innerHTML;
}
}
tabla.innerHTML = "";
reEscribeTabla();
}
}
function reEscribeTabla(){
if(filasI < 0){filasI = 0;}
if(columnasI < 0){columnasI = 0;}
if(filasI >= totTr-filas){filasI = totTr-filas;}
if(columnasI >= totTd-columnas){columnasI = totTd-columnas;}
var columnasF = columnasI*1 + columnas*1;
var filasF = filasI*1 + filas*1;
contTabN = '<table>\r\n';
for(J=filasI; J<filasF; J++){
contTabN += '<TR>\r\n';
for(K=columnasI;K<columnasF;K++){
contTabN += '<td>'+contTab[J][K]+'</td>\r\n'
}
contTabN += '</tr>\r\n'
}
contTabN += '</table>';
tabla.innerHTML = contTabN;
tabla.getElementsByTagName( "tr").item(0).className = "cabColumna";
setTimeout("escribeEncabezados()", 5)
}
function escribeEncabezados(){
for(K=0; K<columnas; K++){
tabla.getElementsByTagName( "tr").item(0).getElementsByTagName( "td").item(K).innerHTML =
contTab[0][(columnasI*1)+K];
}
for(L=0; L<filas; L++){
var estaCelda = tabla.getElementsByTagName( "tr").item(L).getElementsByTagName(
"td").item(0);
estaCelda.innerHTML = contTab[(filasI*1)+L][0];
estaCelda.className = "cabFila";
}
tabla.getElementsByTagName( "td").item(0).innerHTML = "<font>╬</font>";
}
function derecha(){
if(columnasI < columnas){
columnasI += paso;
reEscribeTabla();
repite = setTimeout("derecha()" , 1500);
}
}
function izquierda(){
if(columnasI > 0){
columnasI -= paso;
reEscribeTabla();
repite = setTimeout("izquierda()" , 1500)
}
}
function arriba(){
if(filasI > 0){
filasI -= paso;
reEscribeTabla();
repite = setTimeout("arriba()" , 1500)
}
}
function abajo(){
if(filasI < filas){
filasI += paso;
reEscribeTabla();
repite = setTimeout("abajo()" , 1500)
}
}
function detiene(T,cN){
T.className = cN;
clearTimeout(repite);
paso=1;
}
</script>
<style>
#contieneTabla table{border:3px double; }
#contieneTabla table td{text-align:center; vertical-align:top; border:1px solid; }
#contieneTabla table td font{font-weight:normal; }
#botonera td{font-size:120%; font-family:arial, 'Times New Roman', helvetica , Times;
cursor:default; }
.cabFila{background:#ccc; font-weight:900; }
.cabColumna{background:#ccc; font-weight:900; }
.esp{width:1em; }
.boton{border:3px outset; background:buttonface; }
.sobre{border:3px inset; background:buttonface; }
.bajo{border-width:4px 2px 2px 4px; border-style:inset; background:InactiveCaption; }
</style>
</head>
<body onload="alert('Esta es la tabla completa antes de reducirse.');
setTimeout('inicio()',500)">
<h2>Reduce tabla y desplaza manteniendo los encabezados.</h2>
<p>
Los botones desplazan de a una celda con <tt>mouseover</tt> de a una página con
<tt>mousedown</tt>.
</p>
<table id="botonera">
<td class="boton" onmouseover="arriba(); this.className='sobre';"
onmousedown="paso=columnas;arriba(); this.className='bajo';"
onmouseup="detiene(this,'sobre')" onmouseout="detiene(this,'boton')">▲</td>
<td class="esp"></td>
<td class="boton" onmouseover="abajo(); this.className='sobre';"
onmousedown="paso=columnas;abajo(); this.className='bajo';"
onmouseup="detiene(this,'sobre')"
onmouseout="detiene(this,'boton')">▼</td>
<td class="esp"></td>
<td class="boton" onmouseover="izquierda(); this.className='sobre';"
onmousedown="paso=columnas;izquierda(); this.className='bajo';"
onmouseup="detiene(this,'sobre')" onmouseout="detiene(this,'boton')">◄</td>
<td class="esp"></td>
<td class="boton"onmouseover="derecha(); this.className='sobre';"
onmousedown="paso=columnas;derecha(); this.className='bajo';"
onmouseup="detiene(this,'sobre')" onmouseout="detiene(this,'boton')">►</td>
</table>
<br />
<div id="contieneTabla">
<table>
<tbody>
<tr><td> 0</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><td> I</td></tr>
<tr><td> 1</td><td> 1a</td><td> 1b</td><td> 1c</td><td> 1d</td><td> 1e</td><td> 1f</td><td>
1g</td><td> 1h</td><td> 1i</td></tr>
<tr><td> 2</td><td> 2a</td><td> 2b</td><td> 2c</td><td> 2d</td><td> 2e</td><td> 2f</td><td>
2g</td><td> 2h</td><td> 2i</td></tr>
<tr><td> 3</td><td> 3a</td><td> 3b</td><td> 3c</td><td> 3d</td><td> 3e</td><td> 3f
QWERT</td><td> 3g</td><td> 3h</td><td> 3i</td></tr>
<tr><td> 4</td><td> 4a</td><td> 4b</td><td> 4c</td><td> 4d</td><td> 4e</td><td> 4f</td><td>
4g</td><td> 4h</td><td> 4i</td></tr>
<tr><td> 5</td><td> 5a</td><td> 5b</td><td> 5c</td><td> 5d</td><td> 5e</td><td> 5f</td><td>
5g<br>salto</td><td> 5h</td><td> 5i QWERTY</td></tr>
<tr><td> 6</td><td> 6a</td><td> 6b</td><td> 6c</td><td> 6d</td><td> 6e</td><td> 6f</td><td>
6g</td><td> 6h</td><td> 6i</td></tr>
<tr><td> 7</td><td> 7a</td><td> 7b</td><td> 7c</td><td> 7d QWERTY</td><td> 7e</td><td>
7f</td><td> 7g</td><td> 7h</td><td> 7i</td></tr>
<tr><td> 8</td><td> 8a</td><td> 8b</td><td> 8c</td><td> 8d</td><td> 8e</td><td> 8f</td><td>
8g</td><td> 8h</td><td> 8i</td></tr>
<tr><td> 9</td><td> 9a</td><td> 9b</td><td> 9c</td><td> 9d</td><td> 9e</td><td> 9f</td><td>
9g</td><td> 9h</td><td> 9i</td></tr>
</tbody>
</table>
</div>
</body>
</html>
El efecto podrá ser estéticamente lamentable, pero tiene algunas ventajas sobre el código anterior
- Las celdas no cortan el contenido, ya que la tabla se redimensiona a él.
- Agregando campos de formulario, el usuario puede elegir el ancho y el alto ( en celdas ) de su tabla final
- Una vez que tenga sus datos a la vista, podrá reescribir la cabeceras para que empiecen en "1" y "A", con lo que obtendría una nueva tabla con los datos a pedido.
- Se puede extraer el código fuente de esta última tabla.
- Tambián se puede abrir en una nueva ventana para imprimirla.
Está probada en
IExplorer y
Firefox. Seguramente habrá que hacerle algunos retoques para verla en otros navegadores.
Hay más sobre "bases de datos" en
Array y una página con ejemplos de
caricatos (
) en
Manipular array
saludos
furoya