les comento, hace tiempo busque un código que me permitiera hacer una tabla con la primer columna y primer fila inmovilizada, la cual encontré aquí: http://www.forosdelweb.com/f4/inmovi...-filas-282484/
y me funcionaba de maravilla, sin embargo ahorita tengo que integrarlo en una tabla de 500 columnas (o mas) por aproximadamente 300 filas, el PROBLEMA esta con las columnas, ya que no me da bien la coordenada, con la primer fila y las demás no tengo problemas.
agradezco puedan comentarme algo, les dejo el código, esto me esta dando muchos problemas.
Código PHP:
<html><head><title></title>
<script language= "JavaScript">
var anchoCelda , altoCelda , contCeldas , pasoH , pasoV ,celdas1 , celdas2 ;
var dif = 2;
function iniciar(){
celdas1 = document.getElementById("filRell").getElementsByTagName( "td" ).length;
celdas2 = document.getElementById("encFil").getElementsByTagName( "td" ).length-1;
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 < 80) anchoCelda = 80; //ANCHO M"IMO 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;
}
</script>
<style>
#alfabetos{border-collapse:collapse; background:buttonface;}
#alfabetos td{font:12px "arial" "helvetica" "sans-serif"; border:1px solid; text-align:center; vertical-align:top; }
#contEncCol{overflow:hidden; background:ButtonHighlight; width:50em;}
#contEncFil{overflow:hidden; background:ButtonHighlight; height:20em;}
#contenedor{overflow:auto; width:50em; height:20em; }
#encCol td{text-align:center; vertical-align:middle; border:1px solid;}
#encFil {width:100%; z-index:-1;}
#encCol {height:100%; z-index:-1;}
#contenido{background:#fff;}
#contenido td{text-align:center; white-space:nowrap;}
#rellEncFil{height:80px; width:0; }
#rellEncCol{height:0; width:80px; }
.tabla td{border:1px solid;}
.rellH{ position:relative; top:0; z-index:-1; border:1px solid red;}
</style>
</head>
<body onload="setTimeout('iniciar()' ,500)">
<?php
//creamos la coneccion con la base de datos
include ('conexion.php');
echo '<br/>MUESTRA LA NUEVA AGENDA<br/><br/>';
$toda_la_tabla = 'SELECT * FROM agenda';
$Toda_la_tabla_query = mysql_query($toda_la_tabla);
$filas = mysql_num_rows($Toda_la_tabla_query);
//OBTENEMOS TODAS LAS COLUMNAS Y SUS NOMBRES
$query_columnas=mysql_query('SHOW COLUMNS FROM agenda');
//Numero de columnas
$columnas=mysql_num_rows($query_columnas);
$query_columnas2=mysql_query("SELECT * FROM agenda");
//Numero de columnas
while($row_columnas=mysql_fetch_assoc($query_columnas)){
$n_columna[]=$row_columnas['Field'];
}
while($row_columnas2=mysql_fetch_assoc($query_columnas2)){
$elementos_de_agenda[] = $row_columnas2;
}
//var_dump($elementos_de_agenda);
?>
//Imprimimos la agenda
//echo '<div align="center"><font face="verdana" size="2" color="#004766">Tabla</div></font><br/>';
//echo '<body onload="setTimeout(\'iniciar()\' ,500)">';
// impresion con scrollba
echo '<table id="alfabetos">
<tr>
<td bgcolor="#EBEBEB">Hora</td>
<td>
<div id="contEncCol">
<table id="encCol">
<tr>';
foreach($n_columna as $areglo){
if($areglo!=='Id'){
echo '<td bgcolor="#EBEBEB">'.$areglo.'</td>';
}
}
echo '<td><img id="rellEncCol" src=""/></td>
</tr>
</table>
</div>
</td>
</tr>';
//segunda etapa
echo '
<tr>
<td>
<div id="contEncFil">
<table id="encFil">';
while($row_columnas2=mysql_fetch_assoc($query_columnas2)){
$elementos_de_agenda[] = $row_columnas2;}
foreach ($elementos_de_agenda as $Id){
//echo $Id['Id'];
$horas = ($Id['Id'])-1;
$horario = (8*60*60)+(30*60*$horas);
date('H:i',$horario).'<br/>';
echo '<tr><td bgcolor="#EBEBEB">'.$HORA = date('H:i',$horario).'</td></tr>'; // + 12 horas
}
echo '<tr><td> </td></tr>
<tr><td><img id="rellEncFil" src=""/></td></tr>
</table>
</div>
</td>';
//tercer etapa
echo '
<td>
<div id="contenedor" onscroll="desplaza()">
<table id="contenido">';
//if($query_columnas2){echo 'si';}else{echo 'no';}
foreach($elementos_de_agenda as $linea){
echo '<tr>';
foreach ($linea as $kay=>$Elemento){
if(!ctype_digit($Elemento)){
if($Elemento==''){echo '<td bgcolor="#FFE6E6">'.$Elemento.'</td>';}
else {echo '<td bgcolor="#DFDFFF">'.$Elemento.'</td>';}
}
}
}
echo '</tr>
<tr id="filRell">';
/*
for($uno=1;$uno<$columnas;$uno++){
echo '<td></td>';
}*/
echo '</tr>';
echo '</table>
</div>
</td>
</tr>
</table>';
?>
</body></html> gracias
