Foros del Web - Ver Mensaje Individual

furoya · #17 (**permalink**) 29/07/2008, 08:55

Bien, no hubo que esperar mucho. Aggiornar el ejemplo que mencionaste fue rápido, lo único que me dejó dudas fue un par de líneas que no recuerdo para qué estaban

Código:

var dif = 2;
...
if(document.all) dif=0;

y las mandé a '0'.

Más lo veo y más desprolijo me parece, pero bue, como dije, el que realmente funciona es el que escribe la tabla con cada desplazamiento.

Unas acotaciones antes de ver la nueva versión.
El ejemplo no está pensado para una tabla dinámica. La función que mide y rellena con imágenes para fijar los anchos lo hace al inicio, después de cargar el contenido de las celdas. Por eso es que no va a alcanzar cor repetir la función; seguramente habrá que reescribirla dependiendo del uso final que se le dé.
El problema son justamente las imágenes, aunque se me ocurre que si te envían información, desde el servidor se pueden agregar esas imágenes de relleno y te ahorras todas las medidas del lado cliente; por supuesto, si es que todas tus celdas tienen una medida fija. De otra forma, lo mejor sería reenviar todos los datos de la tabla (sin "rellenos espaciadores") y disparar nuevamente la función, como si fuera una tabla nueva, no cambiándole nada más que una o dos celdas.

Un detalle que no quiero que se me pase : no existe algo como "un tamaño ... de 50px o su equivalente en em". Una se comporta como una medida absoluta, y la otra se verá distinta en cada navegador.
Un cálculo a ojímetro sería darle 0.6em por cada caracter de la celda, poniendo por supuesto un límite de caracteres en el formulario. Por ejemplo, si no se pueden ingresar más de 10, el ancho de las celdas será de 6em. Y cada una tendrá white-space: nowrap; overflow: hidden; .

Lo de ejecutar la funcion lo estuve probando sólo con javascript, deberías consultar mejor en el foro de AJAX, porque lo que hice es una chanchada y no sé si funcionará. Al final del código vas a encontrar un botón que rellena un div con una imagen; ésta, se cargue o no, dispara la función. Habría que pulirlo un poco con un delay, y el onerror no anda muy bien en Opera. En fin, son ideas.
Allí vas a ver bien cuál es el problema de no "resetear" los rellenos de la tabla : se duplican y los anchos se desbandan.

Te dejo el código.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MOVER ENC. prueba 05</title>
<script type="text/javascript">

function alerta(){alert("wertyu")}

var anchoCelda , altoCelda , contCeldas , pasoH , pasoV ,celdas1 , celdas2 ;
var dif = 0; //2

function iniciar(){

document.getElementById("contenido").className = "";
celdas1 = document.getElementById("filRell").getElementsByTagName( "td" ).length;
celdas2 = document.getElementById("encFil").getElementsByTagName( "td" ).length;
//if(document.all) dif=0;

for (j=0; j < celdas1; j++){
var anchoEnc = 0;
var anchoTab = 0;

anchoEnc = document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).offsetWidth;
anchoTab = document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).offsetWidth;

anchoCelda = (anchoTab > anchoEnc) ?  document.getElementById("filRell").getElementsByTagName( "td" ).item(j).offsetWidth : document.getElementById("encCol").getElementsByTagName( "td" ).item(j).offsetWidth;

if(anchoCelda < 40) anchoCelda = 40; //ANCHO MÍNIMO DE CELDA px

contCeldas = document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).innerHTML;
document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).innerHTML = contCeldas+"<img style=\"height:0; width:"+anchoCelda+"px;\" class=\"rellH\">";

contCeldas = document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).innerHTML;
document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).innerHTML ="<img style=\"height:0; width:"+(anchoCelda-dif)+"px;\" class=\"rellH\"><br>"+contCeldas;
}


document.getElementById("contenido").className = "tabla";


for (i=0; i < celdas2; i++){
var altoEnc = 0;
var altoTab = 0;
altoEnc = document.getElementById( "encFil" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;
altoTab = document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;

altoCelda = (altoTab > altoEnc)? document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight : document.getElementById( "encFil" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;

document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).style.height = altoCelda +"px";

document.getElementById( "encFil" ).getElementsByTagName( "td" ).item(i).style.height = altoCelda +"px";
}
}

function desplaza(){
pasoH = document.getElementById("contenedor").scrollLeft;
pasoV = document.getElementById("contenedor").scrollTop;
document.getElementById("contEncCol").scrollLeft = pasoH;
document.getElementById("contEncFil").scrollTop = pasoV;
}

onload = function(){setTimeout('iniciar()' ,500)};
</script>
<style type="text/css">
body{color:#fff; background-color:#000;}
#alfabetos{border-collapse:collapse; background-color:buttonface;}

#alfabetos td{font:12px "arial" "helvetica" "sans-serif"; 
border:1px solid; text-align:center; vertical-align:top; 
color:#000; }

html>body #contEncCol{overflow:hidden; background-color:#ccf; 
width:16em; /*ANCHO TABLA (FF3)*/}
* html #contEncCol{overflow:hidden; overflow-y:scroll; 
background:#ccf; width:16em; /*ANCHO TABLA (IE7)*/}

#contEncFil{overflow:hidden; overflow-x:scroll; 
background-color:#ccf; height:8em; /*ALTO TABLA (Opera9)*/}
html>body #contEncFil{overflow:-moz-scrollbars-horizontal; 
background:#ccf; height:8em; /*ALTO TABLA (FF3)*/}
* html #contEncFil{overflow:hidden; overflow-x:scroll; 
background-color:#ccf; height:8em; /*ALTO TABLA (IE7)*/}

#contEncCol , #contEncFil{scrollbar-face-color:buttonface; 
scrollbar-highlight-color:buttonface; 
scrollbar-shadow-color:buttonface; scrollbar-arrow-color:buttonface; 
scrollbar-track-color:buttonface; scrollbar-base-color:buttonface; 
scrollbar-3dlight-color:buttonface; 
scrollbar-darkshadow-color:buttonface; }

#contenedor{overflow:auto; width:16em; height:8em; /*ANCHO Y ALTO TABLA*/}

#encCol td{text-align:center; vertical-align:middle; 
border:1px solid;}
#encFil {width:100%;}
#encCol {height:100%}

#contenido{background:#fff;}

#contenido td{text-align:left; white-space:nowrap;}

.tabla td{border:1px solid;}

.rellH{ position:relative; top:0; z-index:-1; bor¬der:1px solid red;}
</style>
</head>

<body>
<h2>Tabla que desplaza encabezados con el contenido.</h2>

<table id="alfabetos">
<tr>
<td></td>
<td>
<div id="contEncCol">
 <table id="encCol">
 <tr>
 <td> A </td><td> B </td><td> C </td><td> D </td><td> E </td>
<td style="border-color:#ccf">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
 </tr>
 </table>
</div>
</td>
</tr>

<tr>
<td>
<div id="contEncFil">
 <table id="encFil">
 <tr><td>1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>3</td></tr>
 <tr><td>4</td></tr>
 <tr><td>5</td></tr>
 <tr><td>6</td></tr>
 <tr><td><!-- FILA VACÍA --></td></tr>
 </table>
&nbsp;<br>&nbsp;</div>
</td>
<td>
<div id="contenedor" onscroll="desplaza()">
 <table id="contenido">
 <tr>
 <td> ñ</td><td> alfa</td><td> bravo</td><td> charly</td>
<td> delta</td>
 </tr>
 <tr>
 <td> ñ</td><td> eco</td><td> foxtrot</td><td> golf</td>
<td> hotel</td>
 </tr>
 <tr>
 <td> ñ</td><td> indio</td><td> julieta</td><td> kilo</td>
<td> lima</td>
 </tr>
 <tr>
 <td> ñ </td><td> mike</td><td> noviembre <br><i>un salto</i></td>
<td> oscar</td><td> papa</td>
 </tr>
 <tr>
 <td> ñ ñ</td><td> quebec</td><td> romeo</td><td> sierra</td>
<td> tango</td>
 </tr>
 <tr>
 <td> ñ </td><td> uniforme</td><td> victor</td><td> whisky</td>
<td> x-ray</td>
 </tr>
 <tr id="filRell">
 <td><!-- FILA VACÍA --></td><td> </td><td> </td><td> </td>
<td> </td>
 </tr>
 </table>
</div>
</td>
</tr>
</table>
<p>
<b>NOTAS : </b>
<ol type="1">
<li>El ancho mínimo de las celdas es de 40px.
<li>El ancho se calcula tomando el mayor valor entre la celda de 
encabezado y la de contenido en cada columna.
<li>El texto en las celdas no tiene salto de línea hasta un 
<tt>&lt;br></tt>. 
<li>Al estar calculado en <tt>em</tt>, cambiando la medida de 
fuente en la tabla principal, se ajustan las medidas interiores 
(excepto el ancho mínimo).

</ol>





<div id="prueba" style="border:2px solid red;">&nbsp;</div>
<button onclick = "document.getElementById('prueba').innerHTML = 
'<img src=\'http://www.forosdelweb.com/images/smilies/borracho.gif \' onload=\'iniciar()\' onerror=\'iniciar()\'> <span>imagen que dispara la función</span>';">
Insertar código en el div de prueba.</button>






</body>
</html>