对将 JS 变量插入 Jquery 感到困惑

Question

I'd like to scroll to a certain row in my HTML table, which contains dates in the format of

Nov-17-2021

Currently, I have this date.js function which gets today's date and inputs it in a <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;

I found that I can use JQuery to scroll easily to some text in a page with

function anotherFunction() {
    $(window).scrollTop($("table:contains('some text'):last").offset().top);
}

How can I use the variable date from my Javascript code to scroll to this text in my table, using JQuery? Essentially, I'd like a button that jumps to today's date in my table.

I'm pretty sure there are better ways to do this also, but I am an absolute beginner in programming and I don't know much, so I'm sorry for being very blunt and thank you!

Answer 1

Have you tried using including the date in your string?

function anotherFunction() {
    date = document.getElementById("date").innerHTML
    $(window).scrollTop($(`table:contains(${date}):last`).offset().top);
}

Answer 2

You can add the date string using string concatenation or string literals.

"table:contains(" + date +"):last"
`table:contains(${date}):last`

Example:

 // 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>

Answer 3

Your function anotherFunction is used to scroll to to an element inside a table having text 'some text' .

Only what you have to do is, just trigger the function anotherFunction with some dynamic paramater for the text.

Below is how its done.

 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>