Me gustaría desplazarme a una fila determinada en mi tabla HTML, que contiene fechas en el formato de
Nov-17-2021 Actualmente, tengo esta función date.js que obtiene la fecha de hoy y la ingresa en un <span>
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; const d = new Date(); var today = new Date(); var date = today.getDate() + '-' + monthNames[d.getMonth()] + '-' + today.getFullYear(); document.getElementById("date").innerHTML = date;Descubrí que puedo usar JQuery para desplazarme fácilmente a algún texto en una página con
function anotherFunction() { $(window).scrollTop($("table:contains('some text'):last").offset().top); } ¿Cómo puedo usar la date variable de mi código Javascript para desplazarme a este texto en mi tabla, usando JQuery? Esencialmente, me gustaría un botón que salte a la fecha de hoy en mi tabla.
Estoy bastante seguro de que también hay mejores maneras de hacer esto, pero soy un principiante absoluto en programación y no sé mucho, así que lo siento por ser tan directo y ¡gracias!
¿Has intentado usar la inclusión de la fecha en tu cadena?
function anotherFunction() { date = document.getElementById("date").innerHTML $(window).scrollTop($(`table:contains(${date}):last`).offset().top); }Puede agregar la cadena de fecha mediante concatenación de cadenas o literales de cadena.
"table:contains(" + date +"):last" `table:contains(${date}):last`Ejemplo:
// Fix a date for demo var date = "18-Dec-2021" $("button").click(() => { $(window).scrollTop($("tr:contains('" + date + "'):last").offset().top); }); td { height: 200px; border: 1px solid #CCC; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>click me</button> <table> <tbody> <tr><td>01-Dec-2021</td></tr> <tr><td>10-Dec-2021</td></tr> <tr><td>18-Dec-2021</td></tr> <tr><td>31-Dec-2021</td></tr> </tbody> </table>Su función anotherFunction se usa para desplazarse a un elemento dentro de una tabla que tiene el texto 'some text' .
Solo lo que tiene que hacer es activar la función anotherFunction función con algún parámetro dinámico para el texto.
A continuación se muestra cómo se hace.
function firstFunction() { const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; const d = new Date(); var today = new Date(); var date = today.getDate() + '-' + monthNames[d.getMonth()] + '-' + today.getFullYear(); document.getElementById("date").innerHTML = date; anotherFunction(date) } function anotherFunction(text) { $(window).scrollTop($(`table:contains(${text}):last`).offset().top); } table { margin-bottom: 100vh; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <table> <tr> <th>Scroll to bottom and click the button</th> </tr> <tr> <td id="date">Your Date Will Appear here</td> </tr> </table> <button onclick="firstFunction()">Call First Function</button>