Confused about inserting a JS variable into 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!

Your date format doesn't match the provided text Nov-17-2021 vs 17-Nov-2021 so they won't match unless you do a date parse. — fdomn-m
– fdomn-m, Commented Dec 18, 2021 at 3:07

Stefan Whittaker-Lee · Accepted Answer · 2021-12-18 03:10:59Z

2

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

answered Dec 18, 2021 at 3:10

Stefan Whittaker-Lee

1042 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fdomn-m · Accepted Answer · 2021-12-18 03:12:47Z

0

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>

answered Dec 18, 2021 at 3:12

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Comments

Nitheesh · Accepted Answer · 2021-12-18 03:14:47Z

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>

Collectives™ on Stack Overflow

Confused about inserting a JS variable into Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related