RE:Scroll a una fila en un TBODY
Publicado por
Tavo (1 intervención) el 27/12/2007 13:39:05
La solucción es poner dentro de un contenedor (Un DIV por ejemplo) la tabla
pasos:
1. Colocar la propiedad overflow: xxx; al div --> en donde xxx puede tomar valores de hidden, auto, scroll y visible (Para mas información consultelos).
2. Funciones javascript para seleccionar y deseleccionar las filas de una tabla tanto con el mouse como con las flechas "arriba" y "abajo" del teclado.
En tu caso es adaptarlo para que te pueda funcionar-- >Nada de pereza si quieres alcanzar un propósito!
//Global
var pos=-1;
//..........................................................................................................................
onload=function() {
escucharEvento(document,"click",detectar_Click);
escucharEvento(document,"keydown",keyDown);
}
/*Obtenido de http://www.htmlpoint.com/javascript/corso/js_14.htm
Adaptado por: Tao*/
function detectarBrowser(){
var disponible=0;
//analizza se il browser e' compatibile con Javascript
browserName=navigator.appName.charAt(0);
browserVer=parseInt(navigator.appVersion);
if (browserName=="M" && browserVer >= 3) disponible=1;
if (browserName=="N" && browserVer >= 3) disponible=2;
if (browserName=="N" && browserVer >= 4) disponible=3;
if (browserName=="M" && browserVer >= 4) disponible=4;
return disponible;
}
/*Obtenido de http://www.htmlpoint.com/javascript/corso/js_14.htm
Adaptado por: Tao*/
function keyDown(e) {
var abilitato=detectarBrowser();
var codTecla;
var nomTecla;
if (abilitato==3) {
codTecla=e.which;
nomTecla = String.fromCharCode(e.which);
}else{
if (abilitato==4) {
codTecla=event.keyCode;
nomTecla = String.fromCharCode(event.keyCode);
}
}
iniSeleccion_Filas("tabla",codTecla);
}
//********************************************************************************
function seleccionarFilas(ID_Tabla,s){
tab=document.getElementById(ID_Tabla);
if(s){
ele=tab.getElementsByTagName('tr')[pos];
ele.childNodes[0].className="espaciado over";
ele.childNodes[1].className="espaciado over";
ele.scrollIntoView(true);
/*ele.scrollIntoView(true);--> Esta línea de código es su contribucción por lo que me insentive a responderle puesto que era lo que me faltaba para terminar las reacciones a los eventos, gracias por esto y espero que mi contribucción sirva a muchos más*/
for (i=0; ele=tab.getElementsByTagName('tr')[i]; i++){
if(i != pos){
ele.childNodes[0].className="espaciado out";
ele.childNodes[1].className="espaciado out";
}
}
}else{
for (i=0; ele=tab.getElementsByTagName('tr')[i]; i++){
ele.childNodes[0].className="espaciado out";
ele.childNodes[1].className="espaciado out";
}
}
}
//**************************************************************************
function iniSeleccion_Filas(ID_Tabla,codTecla){
var F_Arriba=38;
var F_Abajo=40;
if(si_display_opciones()){
if(pos<tab.rows.length && pos >= 0){
if(F_Abajo==codTecla){
pos++;
arreglarRango();
seleccionarFilas(ID_Tabla,true);
}else{
if(F_Arriba==codTecla){
pos--;
arreglarRango();
seleccionarFilas(ID_Tabla,true);
}
}
}else{
arreglarRango();
seleccionarFilas(ID_Tabla,true);
}
}else seleccionarFilas(ID_Tabla,false);
}
//**************************************************************************
function arreglarRango(){
if(pos>=tab.rows.length)pos=tab.rows.length-1;
else{ if(pos<0)pos=0; }
if(!si_display_opciones())pos=-1;
}
//**************************************************************************
/*Inicializa los eventos escuchadores del mouse para cuando se pasa
o se deja una fila de la tabla en cuestión*/
function iniLuzFilas(ID_Tabla) {
tab=document.getElementById(ID_Tabla);
for (i=0; ele=tab.getElementsByTagName('td')[i]; i++) {
ele.onmouseover = function() {iluminarFilas(this,true,ID_Tabla);}
ele.onmouseout = function() {iluminarFilas(this,false,ID_Tabla);}
}
}
//****************************************************************************
/*Ilumina la fila en donde el mouse esta indicando*/
function iluminarFilas(obj,valor,ID_Tabla) {
fila = obj.parentNode;
for (i=0; ele = fila.getElementsByTagName('td')[i]; i++){
if(valor)ele.className="espaciado over";
else ele.className="espaciado out";
}
}
3. Dentro de un archivo.css podes tener las siguientes reglas
.out {color:#000000;text-decoration:none;}
.over {color:#FFFFFF;background-color:black;}
.espaciado{padding:0;cursor: pointer; }