Foros del Web » Programando para Internet » Javascript »

Scroll a una fila en un TBODY

Estas en el tema de Scroll a una fila en un TBODY en el foro de Javascript en Foros del Web. Hola a todos, a ver si podeis echarme una mano. Estoy intentando hacer una funcion que ,aparte de seleccionar , una fila determinada de un ...
  #1 (permalink)  
Antiguo 29/05/2007, 03:14
 
Fecha de Ingreso: febrero-2006
Mensajes: 15
Antigüedad: 20 años, 8 meses
Puntos: 0
Scroll a una fila en un TBODY

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
  #2 (permalink)  
Antiguo 29/05/2007, 07:54
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 23 años
Puntos: 45
Re: Scroll a una fila en un TBODY

Me gustaría saber cómo lo has hecho. En FF me funciona bien este ejemplo, pero en IE no consigo hacer que lea correctamente el CSS:

Código PHP:
<table border="1" style="width:600px;" id="laTabla">
    <
thead>
        <
tr>
            <
td>Lorem ipsum</td>
            <
td>dolor sit amet</td>
        </
tr>
    </
thead>
    <
tbody style="height:200px; overflow-y:auto;">
        <
tr id="fila1">
            <
td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non augue. Sed ac odio. Nulla imperdiet lorem sit amet dolor. In faucibus ullamcorper est. Maecenas ut ante in ipsum ultricies tristique. Donec fringilla. Fusce consectetuer. Quisque dolor lacus, aliquet id, ornare at, auctor eu, nisl. Nullam ultricies augue at dolor. Donec iaculis magna a felis. Cras aliquam orci a lectus. Quisque ante orci, rhoncus sed, congue volutpat, elementum sodales, erat. Aliquam lacinia ultrices massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla suscipit mi nec nisi. Quisque vel lacus. Nam accumsan facilisis justo. Quisque convallis mi eu justo. Mauris ipsum. Donec erat tellus, lacinia nec, condimentum sed, tristique at, odio.</td>
            <
td>Etiam pulvinar mattis nunc. Aenean ligula diam, dapibus vitae, sollicitudin ut, vehicula a, ligula. Ut vitae lacus. Nullam blandit ligula eget felis. Quisque a sapien. Sed metus mauris, semper non, dignissim ut, dignissim vitae, nibh. Nam eleifend pede mattis augue. Phasellus viverra, nulla at auctor euismod, enim ligula nonummy mi, ut congue neque magna quis neque. Cras vel tortor. In molestie. Morbi eu augue id sem dapibus posuere. Maecenas tristique nulla sed nulla. Aliquam eu diam. Pellentesque malesuada felis et neque. Maecenas vestibulum laoreet est. Aliquam mauris justo, vehicula vitae, vestibulum at, mollis nec, diam.</td>
        </
tr>
        <
tr id="fila2">
            <
td>Nam sagittis aliquet tellus. Etiam ipsum. Phasellus sed erat a augue pharetra placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus cursus magna fermentum mauris. Nulla diam tortor, dictum quis, porta eget, condimentum vitae, orci. Duis sagittis molestie mi. Cras porta. Donec ac nulla. Nulla iaculis dui sit amet urna nonummy porta. Fusce faucibus. Cras arcu nisi, sodales quis, tincidunt quis, vulputate sit amet, dolor. In hac habitasse platea dictumst. Etiam rutrum odio eu neque. Donec dui metus, tempor eget, elementum sed, luctus in, leo. Etiam odio. Curabitur sapien nisl, lacinia non, hendrerit nec, molestie et, est. Aliquam facilisis, velit a interdum bibendum, nunc felis nonummy turpis, at euismod lacus libero sed lorem. Sed nisi velit, laoreet eu, vestibulum ut, faucibus sed, massa.</td>
            <
td>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Vivamus nec velit ac magna tempus tempor. Fusce blandit auctor magna. Cras non augue. Donec feugiat nibh vel massa. Etiam pellentesque, enim quis ultrices egestas, nibh justo convallis leo, in egestas lorem enim a arcu. Proin commodo leo vitae magna. Etiam eget urna nec justo fermentum lobortis. Cras hendrerit ullamcorper massa. Nullam tincidunt pretium tellus. Cras mattis tempus enim. Integer massa. Suspendisse feugiat nonummy tellus. Vestibulum interdum elit ut elit. Etiam mauris nisl, bibendum eget, pulvinar quis, interdum id, neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</td>
        </
tr>
    </
tbody>
    <
tfoot>
        <
tr>
            <
td>Lorem ipsum dolor sit amet</td>
            <
td>consectetuer adipiscing</td>
        </
tr>
    </
tfoot>
</
table>

<
input type="button" value="scroll(2)" onclick="scrollToRow('laTabla', 'fila2' )" />

<
script>

function 
scrollToRow(obj,fila){
    
objBody=document.getElementById(obj).getElementsByTagName('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";
        }
    }
}



</script> 
Por cierto en FF funciona bien el código Javascript también, en IE sólo lo remarca de color y hace un scroll que no consigo entender bien..


Un saludo.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
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 04:03.