JavaScript - Scroll a una fila en un TBODY

 
Vista:

Scroll a una fila en un TBODY

Publicado por Jose Antonio Mur (1 intervención) el 29/05/2007 11:00:04
Hola a todos, a ver si podeis echarme una mano.
Estoy intentando hacer una funcion que ,aparte de seleccionar , una fila determinada de un TBODY, me la muestre si esta no se ve en la pantalla.

Las tablas en las que intento seleccionar la fila tienen la estructura de <thead>...</thead><tbody>....</tvody><tfoot>....<tfoot> y por css limito la altura del TBODY a 500px con el overflow-y a automatico.

// obj es el ID de la tabla y fila el ID de la fila que quiero seleccionar.
function scrollToRow(obj,fila)
{
objBody=document.getElementById(obj).getElementsBy TagName('TBODY');
objFilas=objBody[0].getElementsByTagName('TR');
for(i=0;i<objFilas.length;i++)
{
if(objFilas[i].id==fila)
{
objFilas[i].scrollIntoView(false);
objFilas[i].style.background="#FFDBD6";
}
}
}

Muchas Gracias
Editar/Borrar Mensaje
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

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; }
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar