Foros del Web » Programando para Internet » Javascript »

scrollbar en tabla html

Estas en el tema de scrollbar en tabla html en el foro de Javascript en Foros del Web. hola amigos buen día, se me ha presentado una complicacion con un codigo de javascript, pero la verdad soy nueva con estos temas, ya le ...
  #1 (permalink)  
Antiguo 05/06/2012, 08:33
 
Fecha de Ingreso: diciembre-2011
Mensajes: 90
Antigüedad: 12 años, 10 meses
Puntos: 0
scrollbar en tabla html

hola amigos buen día,

se me ha presentado una complicacion con un codigo de javascript, pero la verdad soy nueva con estos temas, ya le di muchas vueltas y no lo he podido resolver, podrian echarme una mano?

gracias les dejo el codigo, el problema es que las culumnas del ecnabezado que son 'n' no coinciden con las que se encontraran dentro de la tabla con el scrollbar.

gracias

Código PHP:
<HTML>
<HEAD>
<TITLE>TABLA</TITLE>
<SCRIPT language= "JavaScript">
var ancho1,ancho2,i;
var columnas=<?=$_POST['columnas'];?>; //CANTIDAD DE COLUMNAS//

function ajustaCeldas(){
for(i=0;i<columnas;i++){
ancho1=document.getElementById("encabezado").rows.item(0).cells.item(i).offsetWidth;
ancho2=document.getElementById("datos").rows.item(0).cells.item(i).offsetWidth;
if(ancho1>ancho2){
document.getElementById("datos").rows.item(0).cells.item(i).width = ancho1-6};
else{
document.getElementById("encabezado").rows.item(0).cells.item(i).width = ancho2-6;}
}
}
</SCRIPT>
<STYLE>
#encabezado{border:0}
#encabezado th{border-width:1px}
#datos{border:0}
#datos td{border-width:1px}
</STYLE>

</HEAD>

<BODY onload=ajustaCeldas()>

<?php
echo '<table border=1 bgcolor=scrollbar align=center>
<td>
<table id="encabezado" border=1 cellspacing=0 cellpadding=2 bgcolor=#cccccc>
'
;
    foreach (
$a as $k=> $array){
    foreach (
$array as $clave=> $elemento){
   if(
$elemento){ 
     echo 
'<td bgcolor="#CECECE" width="100"><font face="verdana" size="2"><div align="center">
     <input type="hidden" name="compradoras['
.$clave.']['.$k.']" value="'.$elemento.'"/>
       '
.$elemento.'
       </div></td>'
;
        }else{
            echo 
'<td bgcolor="#CECECE" width="100"><font face="verdana" size="2"><div align="center">.</div></td>';
            }
    }
}
echo 
'</tr>';
echo 
'</table>';

<
div style="overflow:auto; height:100px; padding:0">

<
table border=1 cellspacing=0 cellpadding=2 id="datos" bgcolor=white>
foreach( 
$b as $key => $arrai ) {
foreach (
$arrai as $no => $elemento){
      if(
$elemento){
              echo 
'<tr>';
          echo 
'<td bgcolor="#CECECE" width="100"><font face="verdana" size="2"><div align="center">
           <input type="hidden" name="elemento['
.$no.']['.$key.']"id="hiddenField" value="'.$elemento.'"/>
         '
.$elemento.'
      </div></div></td>'
;
      
//empresas proveedoras
      //echo  'no'.$no.'***key'.$key.'***elemento/'.$elemento;
      
for($ch=1$ch<= $c$ch++){
     
//cruces
      
echo'<td width="110"><div align="center"><font face="Verdana" size="1"> <input type="checkbox" name="elemento['.$no.']['.$ch.']" value="'.$elemento.'"/></font></div></td>';
        
//echo  'no'.$no.'---ch'.$ch.'---elemento/'.$elemento;
        
}
      echo 
'</tr>';
    }


    }
}
echo 
'</table></body></html>';
echo 
'</td></table>';
?>
gracias
  #2 (permalink)  
Antiguo 05/06/2012, 11:03
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: scrollbar en tabla html

¡Noooo! ¡Ahora también con PHP!


primera fila de una tabla

scroll complicado

barra de desplazamiento en tablas y layers

Inmovilizar Columnas y Filas

tbody con scroll?

HTML fijae primera fila y columna en una tabla

Fijar fila superior de tabla

Tabla con Barras de Desplazamiento


Hay decenas más, pero me parece que este tema resume un poco la situación de los códigos que están usando.

Tabla HTML con cabecera fija y scroll vertical y horizontal


P.D. : Yo no le quiero dar la razón a IsaBelM, porque soy un cabezadura, pero al final vamos a tener que hacer una versión actualizada de todo esto. ¡El ejemplo de este tema hasta usa <font> !!!
  #3 (permalink)  
Antiguo 06/06/2012, 11:00
 
Fecha de Ingreso: diciembre-2011
Mensajes: 90
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: scrollbar en tabla html

muchas gracias me fue de mucha utilidad!!
  #4 (permalink)  
Antiguo 06/06/2012, 11:28
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: scrollbar en tabla html

Cita:
Iniciado por furoya Ver Mensaje
¡
P.D. : Yo no le quiero dar la razón a IsaBelM, porque soy un cabezadura, pero al final vamos a tener que hacer una versión actualizada de todo esto. ¡El ejemplo de este tema hasta usa <font> !!!
Modestamente, creo que eso ya está hecho, este demo lo publiqué en numerosos posts de por lo menos 2 años a esta parte

http://foros.emprear.com/html/tabla_con_scroll/

sólo css y crossbrowser

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 06/06/2012, 13:20
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: scrollbar en tabla html

De nada yamsita. Te dejamos mil ejemplos para ver, me alegra que al menos alguno te haya servido.

Y con respecto a tu ejemplo, emprear...

Primero, no seas modesto. Te queda mal. Porque como afirmaba Schopenhauer : "La humildad en los grandes es hipocresía".

Después, ése link está en alguno de los que puse arriba. Seguro. No puede faltar.

Lo que sí debo aclarar es que esa tabla solamente tiene fija la cabecera superior, y lo que venimos comentando hace algunos días es el invento de fijar también la izquierda.
Además, el mayor problema es ajustar los tamaños de las celdas. Una cosa es fijarlos de prepo, y otra que se acomoden al contenido. En las hojas de cálculo se autoajustan.

Por eso destaqué el último link. En medio de mi retorcido y pretendidamente tétrico sentido del humor, dejo claro que estos ejemplos ya hay que sepultarlos.
Y comenzar a insistir en que vengan incorporados a los navegadores. Una propiedad para fila y/o columna fijas no estaría nada mal.
  #6 (permalink)  
Antiguo 06/06/2012, 20:24
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: scrollbar en tabla html

@furoya, no entendía mu bien el objeto, hasta que recién (me reconozco pecador), leí el link "destacado".
Eso que pretenden, ya está hecho,
http://acatalept.com/common/test/fixed-table.html
Y no me vengas que con librerías no sirve...
funciona perfecto en todas partes

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 07/06/2012, 07:59
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: scrollbar en tabla html

¡Por supuesto que está hecho! Eso que linkeaste es el mismo ejemplo que venimos poniendo desde hace mil años en FdW. La única diferencia es que metieron todo el escript en una ... (y bue) "librería".
Por acá desarrollamos todo el escript, porque la idea es que quien abra el post, lo entienda. No que copie y pegue creyendo que hace programación.

Hace muy poco empecé a estudiar el JQuery, pero viendo la cantidad de gente que aparece a "preguntar" y "responder" con código propietario de esa ... (uff) "librería", sin aclarar que es propietario y creyendo que es javascript, no voy a seguir publicando nada que lo use. No hasta que se entienda que es un agregado, que en la mayoría de los casos está de más, y que si se lo usa hay que entenderlo. Porque encima vienen con reclamos de que "no les anda" y quieren que se lo arreglemos nosotros.

Bien, ya que te decidiste a seguir el hilo del debate, te cuento que en verdad empieza acá

HTML fijae primera fila y columna en una tabla #3

O más bien en el verdadero "#3", que fue eliminado.
Y siguió en

Conversación Entre IsaBelM y furoya #20122

para llegar al link que viste recién ahora.


El punto de esto es que no sé si debemos hacer más inventos para fijar cabeceras de tabla. Nos va a pasar como con todos los parches que vinimos creando para suplir las falencias de los navegadores, y que después nos las tenemos que guardar en lo más profundo del bolsillo porque (al fin!) los desarrolladores de soft, en connivencia con el W3C, aprueban o proponen una etiqueta, un atributo, una propiedad que hace exactamente eso que nos matamos inventando. Pero más fácil. Como debe ser.

¿Qué les impide agregar a position: fixed un left: scroll, para que solamente se quede clavada sobre el desplazamiento vertical?

¿O esperan que fabriquemos una (aggj…) "librería" para que reconozca el valor?.
  #8 (permalink)  
Antiguo 08/06/2012, 07:52
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: scrollbar en tabla html

juraría que había posteado el código, con algunas de las nuevas especificaciones, en el tema de html hace días. esta cabeza mia

mi intención no era emular una hoja de calculo, por cierto nunca he visto ninguna. mi intención era crear un código minimalista que cualquier usuario pudiera manejar igual que se maneja una tabla normal. con un ancho a la tabla y a cada celda de la primera fila

le he añadido tu modificación y además ahora el alto de las celdas de la columna derecha, se adaptan al alto de las celdas con datos tabulados.

podríamos plantearnos como hacer que el ancho del header y del cuerpo se ajustaran a la celda que tuviese un ancho mayor. ya veremos si hay ganas de hacerlo

en verde está marcada las partes editables

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#table-scroll {
width: 300px;
height: 100px;
overflow: auto;

}


table, td, th {
border: #c1c1c1 1px solid;
vertical-align: top;
}


#fixedY{
width: 500px; /* suma ancho de las celdas */
position: relative;
top: 0;
z-index: 99;
}


#fixedY table{
border-collapse: collapse;
}


#fixedY table th.fixedYth {
background-color: red;
font: bold 15px Tahoma, Geneva, sans-serif;
color: #fff;
}


#cuerpoDatos {
width: 500px; /* suma ancho de las celdas */
}

#cuerpoDatos > div{
float: left;
}


#cuerpoDatos > div#fixedX{
position: relative;
left: 0;
z-index: 98;
background-color: yellow;
}

#cuerpoDatos > div#fixedX table{
border-collapse: collapse;
}


#cuerpoDatos > div#fixedX table td.fixedXtd{
vertical-align: middle;
}


#cuerpoDatos > div#nofixedX table{
border-collapse: collapse;
}


#corner{
font: bold 15px/120% Tahoma, Geneva, sans-serif;
text-align: center;
border: #c1c1c1 1px solid;
background-color: orange;
position: fixed;
z-index: 999;
}
</style>
<script type="text/javascript">
function fnc() {

var verticalTDfixed = document.querySelectorAll('.fixedXtd');
var largoFila = document.querySelectorAll('.nofixedXtd');
var anchoColumna = document.querySelectorAll('.fixedYth');
var anchoColumna2 = document.querySelectorAll('.ancho');

// ancho celda fixed superior derecha
document.getElementById('corner').style.width = parseInt(document.querySelector('.fixedXtd').offse tWidth +3) + 'px';

if(anchoColumna[0].offsetWidth >= verticalTDfixed[0].offsetWidth) {
// ancho primera columna
document.getElementById('fixedX').style.width = anchoColumna[0].offsetWidth + 'px';
verticalTDfixed[0].style.width = anchoColumna[0].offsetWidth + 'px';

// ancho tabla con datos tabulados
document.getElementById('nofixedX').style.width = parseInt(document.querySelector('#cuerpoDatos').of fsetWidth - anchoColumna[0].offsetWidth) + 'px';

} else {

// ancho primera columna
anchoColumna[0].style.width = verticalTDfixed[0].offsetWidth -3 + 'px';

// ancho tabla con datos tabulados
document.getElementById('nofixedX').style.width = parseInt(document.querySelector('#cuerpoDatos').of fsetWidth - anchoColumna[0].offsetWidth-1) + 'px';
}


// ancho td con datos tabulados
var n = 1;
for(var i = 0; i < anchoColumna2.length; i++) {
anchoColumna2[i].style.width = anchoColumna[n].offsetWidth -3 + 'px';
n++;
}



// largo de cada fila con datos tabulados
for(var i = 0; i < verticalTDfixed.length; i++) {
if(navigator.userAgent.indexOf('MSIE') != -1 || navigator.userAgent.indexOf('AppleWebKit') != -1) { // ie, chrome, safari
verticalTDfixed[i].style.height = largoFila[i].offsetHeight -3 + 'px';
} else {
verticalTDfixed[i].style.height = largoFila[i].offsetHeight + 'px'; // ff, opera
}
}


// "fijamos" los bloques al hacer scroll
document.getElementById('table-scroll').onscroll = function() {
document.getElementById('fixedY').style.top = document.getElementById('table-scroll').scrollTop + 'px';
document.getElementById('fixedX').style.left = document.getElementById('table-scroll').scrollLeft + 'px';
};


}

window.onload = fnc;
</script>
</head>
<body>

<div id="table-scroll">

<div id="corner"> ☺ </div>

<div id="fixedY">
<table>
<thead>
<tr>
<th class="fixedYth" style="width:50px">Lote</th><th class="fixedYth" style="width:220px">Producto 1</th><th class="fixedYth" style="width:100px">Producto 2</th class="fixedYth"><th class="fixedYth" style="width:130px">Producto 3</th>
</tr>
</thead>
</table>
</div>

<div id="cuerpoDatos">

<div id="fixedX">
<table>
<tbody>
<tr>
<td class="fixedXtd">Viaje 1</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 2</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 3</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 4</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 5</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 6</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 7</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 8</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 9</td>
</tr>
</tbody>
</table>
</div>

<div id="nofixedX">
<table>
<tbody>
<tr>
<td class="nofixedXtd ancho">moto un largo mayor que las demás filas</td><td class="ancho">avión</td><td class="ancho">barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión también vamos a alargarlo</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
</tbody>
</table>
</div>

</div>

</div>

</body>
</html>
pd: al final ha salido otro medio engendro
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #9 (permalink)  
Antiguo 12/06/2012, 11:18
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: scrollbar en tabla html

Es que siempre pasa eso cuando queremos programar en el documento lo que debe venir programado en el navegador. Nos pasó todas las veces.

Por algunas preguntas cíclicas que reaparecieron en estos días, me dediqué a buscar qué respuestas habíamos dado en otros años a esos planteos, y me crucé con montones de ejemplos como el que estamos comentando. Y un montón de ellos ya fueron incluídos en el CSS, JS y HTML (oficial o propietario), lo que convierte a los códigos publicados en piezas de museo. Y en mi caso, algunas me tomaron varios meses de desarrollo. (Todos sabemos que no soy tan inteligente como tú, que tomas mis códigos y los desarmas y rearmas a tu gusto en minutos ).

Por eso me resisto a "inventar" lo que seguramente van a incorporar de manera estándar en algún momento. Y tampoco puedo decir que seamos útiles para ayudar a la comunidad de desarrolladores, porque mañana (hoy) aparece un yaicueri_scrolteibl.js y todos se prenden sin entender media línea de lo que usan.

¡Y luego vienen a preguntar acá cómo lo modifican para que la barra de desplazamiento quede cruzada en diagonal a la celda K/25!. Que después termina en un "modifíquenlo ustedes porque yo digo que soy programador pero no sé un pito; ¡y ojo con venir a decirme que aprenda programación, porque me hago el víctima de vuestro maltrato y los hago quedar como malos colaboradores delante de los nabos que —todavía— tienen una neurona menos que yo y se sientan identificados!"


Entiendo que te hayas tomado el trabajo de armar esa tabla, y también que al final te haya parecido un "medio-engendro". Es una satisfacción imaginar algo y probar que lo podemos hacer; parche tras parche vamos obteniendo toda la información que el navegador ya tiene y vamos creando ese mecanismo que para él sería tan fácil...

Por eso quiero que entiendas que no estoy despreciando el desafío.
Es que veo cosas como éstas

estirar imagen de fondo (gradiente, ajuste fondo)

descripcion de un select (tooltip en opciones)

Zoom en una imagen (cursor lupa)

Yo sé que existe...script ajusta resolucion (zoom de documento)

visualizar un atributo de un estilo (hoy la consola está en todos los browsers)

problema con tablas(urgente porfavor) (ya anda)

Métodos de Arrays (muchos ya existen y son compatibles)

Manipular array (y acá hay más)

backgound image resizable? (eso, y la posición fija, ya son compatibles)

Constantes en CSS (todavía no anda, pero ya hay proyectos)

Paleta de colores con su valor hex? (HTML5 ya lo cubre, aunque la objeción de
Cambio de tamaño del colorwheel
también vale )

Se pueden redondear ?? (una vegüenza, creo que hoy ni se puede ver. Las esquinas redondas ya funcionan)

PNG e IE. Pregunta (IE ya ve el canal alfa de *.png)

Diferentes MouseOver's a una Imagen (el hover ya es compatible)

salto de linea doble en mozilla (ya lo arreglaron. —Creo—)

Etiqueta "nobr" no aceptada (No sé si no-ajuste de línea es tan compatible, pero la marquesina sí, yCSS ya provee medios de animación más completos)

Efecto 'enfoque' con cambio de opacidad (mucho más eficiente con CSS)

CRear efecto de transicion entre dos imagenes. (también con CSS)

Rotar Texto

Boardgame (si no me equivoco, además de la rotación también hay un drag&drop HTML)

Equivalente a max-width en ie (ya hay más compatibilidad)

Necesito ayuda urgente!!!!!!! (incompatible, pero ya hay una forma de incrustar imágenes base64 en todos los navegadores)

Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() ) (también con CSS)

Enlaces largos (las elipsis ya andan)

Viñetas personalizables. (con CSS se pueden agregar caracteres para simular viñetas)

slidebar / trackbar en html ... (HTML5 nos pasó el trapo)

¿Cómo se llama este componente? URGENTE (con éste también)

Negrita en un TEXTAREA (Firefox ya lee el evento de ruedita de maus?)

Efecto 'enfoque' con cambio de opacidad (CSS, otra vez)

Efecto borroso o nublado o desenfocado, sin filter blur. (con un pequeño truco, pero es CSS)

Compatibilidad IE OPERA FIREFOX (¿cuánto superamos de esto?)

con decenas más que ya no quiero ver ... y me doy lástima.
  #10 (permalink)  
Antiguo 12/06/2012, 13:04
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: scrollbar en tabla html

entiendo lo que quieres decir. pero hasta entonces, habrá que dar soluciones. destripar lo ya hecho y volverlo a montarlo con las nuevas herramientas que se nos proveen.

y no te des lástima por que en su momento fueron códigos con los que se solventaron ciertas deficiencias
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #11 (permalink)  
Antiguo 22/10/2014, 18:17
 
Fecha de Ingreso: abril-2012
Ubicación: Argentina
Mensajes: 215
Antigüedad: 12 años, 6 meses
Puntos: 2
Respuesta: scrollbar en tabla html

Amigos quiero agradecerles porque este tema estaba buscando.

Etiquetas: html, input, scrollbar, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:04.