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

我想滚动到HTML表中的某一行，其中包含格式的日期

Nov-17-2021

目前，我有一个date.js函数，它可以获取今天的日期并将其输入到<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;

我发现我可以使用JQuery轻松滚动到页面中的一些文本

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

如何使用JQuery使用Javascript代码中的变量date滚动到表中的文本？从本质上讲，我想要一个能跳到我桌子上今天日期的按钮。

我很确定还有更好的方法可以做到这一点，但我是一个绝对的编程初学者，我知道的不多，所以我很抱歉这么直率，谢谢！

您是否尝试过在字符串中包含日期？

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

您可以使用字符串串联或字符串文字添加日期字符串。

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

示例：

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

函数anotherFunction用于滚动到具有文本'some text'的表中的元素。

只需要为文本触发带有一些动态参数的函数anotherFunction。

下面是它是如何做到的。

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>

相关内容

最新更新

热门标签：