對在Jquery中插入JS變數感到困惑-有解無憂

我想滾動到我的 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);
}

如何date使用 JQuery 使用 Javascript 代碼中的變數滾動到表中的此文本？本質上，我想要一個按鈕，可以在我的表格中跳轉到今天的日期。

我很確定也有更好的方法來做到這一點，但我是編程的絕對初學者，我知道的不多，所以我很抱歉直言不諱，謝謝！

uj5u.com熱心網友回復：

您是否嘗試過在字串中包含日期？

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

uj5u.com熱心網友回復：

您可以使用字串連接或字串文字添加日期字串。

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

uj5u.com熱心網友回復：

您的函式anotherFunction用于滾動到具有 text 的表格內的元素'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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/385083.html

標籤：javascript html 查询

上一篇：jQuery.on單擊生成的元素

下一篇：添加新訊息時如何自動向下滾動