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!
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);
}
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>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>