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: 18 años, 2 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: 20 años, 6 meses
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 ametconsectetuer adipiscing elitProin non augueSed ac odioNulla imperdiet lorem sit amet dolorIn faucibus ullamcorper estMaecenas ut ante in ipsum ultricies tristiqueDonec fringillaFusce consectetuerQuisque dolor lacusaliquet idornare atauctor eunislNullam ultricies augue at dolorDonec iaculis magna a felisCras aliquam orci a lectusQuisque ante orcirhoncus sedcongue volutpatelementum sodaleseratAliquam lacinia ultrices massaCum sociis natoque penatibus et magnis dis parturient montesnascetur ridiculus musNulla suscipit mi nec nisiQuisque vel lacusNam accumsan facilisis justoQuisque convallis mi eu justoMauris ipsumDonec erat telluslacinia neccondimentum sedtristique atodio.</td>
            <
td>Etiam pulvinar mattis nuncAenean ligula diamdapibus vitaesollicitudin utvehicula aligulaUt vitae lacusNullam blandit ligula eget felisQuisque a sapienSed metus maurissemper nondignissim utdignissim vitaenibhNam eleifend pede mattis auguePhasellus viverranulla at auctor euismodenim ligula nonummy miut congue neque magna quis nequeCras vel tortorIn molestieMorbi eu augue id sem dapibus posuereMaecenas tristique nulla sed nullaAliquam eu diamPellentesque malesuada felis et nequeMaecenas vestibulum laoreet estAliquam mauris justovehicula vitaevestibulum atmollis necdiam.</td>
        </
tr>
        <
tr id="fila2">
            <
td>Nam sagittis aliquet tellusEtiam ipsumPhasellus sed erat a augue pharetra placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos hymenaeosVivamus cursus magna fermentum maurisNulla diam tortordictum quisporta egetcondimentum vitaeorciDuis sagittis molestie miCras portaDonec ac nullaNulla iaculis dui sit amet urna nonummy portaFusce faucibusCras arcu nisisodales quistincidunt quisvulputate sit ametdolorIn hac habitasse platea dictumstEtiam rutrum odio eu nequeDonec dui metustempor egetelementum sedluctus inleoEtiam odioCurabitur sapien nisllacinia nonhendrerit necmolestie etestAliquam facilisisvelit a interdum bibendumnunc felis nonummy turpisat euismod lacus libero sed loremSed nisi velitlaoreet euvestibulum utfaucibus sedmassa.</td>
            <
td>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestasSuspendisse potentiVivamus nec velit ac magna tempus temporFusce blandit auctor magnaCras non augueDonec feugiat nibh vel massaEtiam pellentesqueenim quis ultrices egestasnibh justo convallis leoin egestas lorem enim a arcuProin commodo leo vitae magnaEtiam eget urna nec justo fermentum lobortisCras hendrerit ullamcorper massaNullam tincidunt pretium tellusCras mattis tempus enimInteger massaSuspendisse feugiat nonummy tellusVestibulum interdum elit ut elitEtiam mauris nislbibendum egetpulvinar quisinterdum idnequeVestibulum 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 13:32.