Soporte » Guías – Resolución de problemas » como crear un vinculo entre una pagina y una tabla ?

  • Resuelto ihvhlfa

    (@ihvhlfa)


    Hola,
    trabajo en una pagina que contiene unos números de código (ej. «102-02»)y necesito que al hacer click sobre el código, se enlace o salte exactamente en la posición del código en referencia dentro de una tabla que muestro en otra pagina.

    gracias por el apoyo
    saludos

Viendo 13 respuestas - de la 1 a la 13 (de un total de 13)
  • Moderador almendron

    (@almendron)

    Esto te podría servir: https://desarrolloweb.com/articulos/575.php

    Sección «Enlazar con una página diferente, pero en una sección interna».

    Para enlazar elementos entre distintas páginas puedes usar un «anchor link» que incluya la página de destino y el id del elemento al que quieres que vaya.

    O sea, en la página origen pondrías un enlace en el número de código
    102-02

    Y en la página de destino, el elemento de la tabla tendría que tener un id igual al que has llamado desde el origen. O sea:
    <span id=»tabla10202″>Código 102-02</span>

    En lugar de «<span>» puedes usar la etiqueta que quieras pero tiene que incluir el id.

    Eso te llevaría directamente a la página que le especifiques y al elemento con ese id.

    Iniciador del debate ihvhlfa

    (@ihvhlfa)

    Muchas Gracias @almendron, la info me ha servido, muchas gracias @juancarlosnieto
    no he logrado conseguir lo que quería con el «span id» pero logre algo con esta ancla FN-AC-270a.2, sin embargo por alguna razón al ver el resultado en la pantalla el código que muestra de primero es otro a una o a dos posiciones abajo, parece que el código que debe aparecer de primero queda como oculto detrás del menu que tengo en la pagina.

    alguna otra sugerencia?

    Iniciador del debate ihvhlfa

    (@ihvhlfa)

    Perdón, soy novato en esto y no se como enviar la etiqueta que quiero mostrarles, pero básicamente es con, a name=

    • Esta respuesta fue modificada hace 2 años, 9 meses por ihvhlfa.
    • Esta respuesta fue modificada hace 2 años, 9 meses por ihvhlfa.
    • Esta respuesta fue modificada hace 2 años, 9 meses por ihvhlfa.
    • Esta respuesta fue modificada hace 2 años, 9 meses por ihvhlfa.
    Moderador jose64

    (@jose64)

    Hola @ihvhlfa

    ¿Puedes poner el enlace a la página? así sería mucho más sencillo ayudarte.

    El enlace al ancla queda cubierto por el parte superior, tienes que desplazarlo hacia abajo con CSS para ubicarlo en el sitio correcto.

    La forma de hacer esto es añadir al bloque que lleva el ancla una clase específica para ese desplazamiento vertical y en el CSS adicional del tema añadirle el desplazamiento con la propiedad scroll-margin-top, te dejo información al respecto:

    Web technology for developers > CSS: Cascading Style Sheets > scroll-margin-top

    Un ejemplo de implementación:

    How to prevent anchor links from scrolling behind a sticky header with one line of CSS

    También puedes hacerlo posicionando con la propiedad position, te dejo la información:

    Tecnología para desarrolladores web > CSS > position

    Finalmente, tienes un plugin en el repositorio, no creo que te haga falta con la información que te indiqué, pero igualmente te lo indico:

    Page scroll to id

    Recuerda marcar el debate como resuelto, así nos ayudas a mantener el foro al día.

    Iniciador del debate ihvhlfa

    (@ihvhlfa)

    Hola @jose64, gracias por responder.
    ¿Puedes poner el enlace a la página? así sería mucho más sencillo ayudarte.
    R. estoy trabajando a nivel local.

    Revisare la información que me sugieres y luego te comento

    Saludos

    Moderador almendron

    (@almendron)

    En principio, es algo tan sencillo como:

    1) En los números de códigos poner un enlace de esa forma:

    <a href="direccion-pagina#seccion1">102-02</a>

    donde «direccion-pagina» es la página a la que quieres que vaya el visitante y «seccion1» es la parte de dicha página hasta donde debe desplazarse.

    2) Edita la página destino y accede a su código fuente. Localiza la celda de la tabla destino, sitúas el cursos a la izquierda del contenido de la celda e insertas el enlace:

    <td>Celda 1</td> pasa a ser <td><a name="seccion1"></a>Celda 1</td>

    Iniciador del debate ihvhlfa

    (@ihvhlfa)

    Muchas Gracias por el apoyo brindado, pienso que mi poca experiencia en este campo no me deja ver con claridad lo sencillo que es a veces resolver algo.
    les comparto lo que he logrado hasta ahora en este enlace temporal http://marianelae.com
    si presionan en cualquier opción del menu desplegable verán los códigos en cada pagina por ejemplo GRI 102-01 y esta ira a su tabla correspondiente.
    He logrado avanzar pero aun no he podido aplicar la solución via la info que me sugirió Jose Luis.

    Saludos.

    Moderador almendron

    (@almendron)

    Tú has puesto:

    <a name="102-12">102-12</a>

    y deberías poner

    <a name="102-12"></a>102-12

    Por lo demás, lo has hecho bien y se desplaza hasta la posición. El problema está en en el encabezamiento que se mantiene fijo en la parte superior mientras se desplaza y acaba ocultado la celda destino.

    • Esta respuesta fue modificada hace 2 años, 9 meses por almendron.
    Moderador almendron

    (@almendron)

    Una solución sería poner <a name="102-12"></a> en la celda superior.

    La otra sería cambiar le comportamiento del menú superior para que no bajara al hacer scroll. o cambiar el comportamiento

    Iniciador del debate ihvhlfa

    (@ihvhlfa)

    Gracias @almendron por tus comentarios y consejos, haré las prueba de tu sugerencia en el primer comentario.
    sobre el segundo comentario no entendí bien cuando dices poner en la celda superior. Te refieres a poner la etiqueta por cada celda de la tabla destino? por que hay un listado de códigos por tabla(6), o te refieres a poner la etiqueta una única vez en la celda superior de cada tabla ?

    Moderador almendron

    (@almendron)

    No, no me refiero a eso.

    A ver: como el menú superior se queda fijo cuando te desplazas hacia abajo, la línea de la tabla a la que apunta el enlace queda oculta.

    Ejemplo:

    Cuando haces clic en http://marianelae.com/tabla-gri-contenidos-generales/#102-21 te lleva efectivamente a esa página y a la posición que has marcado. Sin embargo, la línea que contiene «102-21» queda oculta. Para evitar esto, el ancla la puedes poner en la línea superior, es decir, en la fila de la «102-20».

    Iniciador del debate ihvhlfa

    (@ihvhlfa)

    Listo @almendron te he entendido, agradecido con todos los aportes brindados aqui.
    Marcare como resuelto.

Viendo 13 respuestas - de la 1 a la 13 (de un total de 13)
  • El debate ‘como crear un vinculo entre una pagina y una tabla ?’ está cerrado a nuevas respuestas.