我不是程序员，但我在这里和那里看到过一些简单的代码。 我被赋予了一项任务。我四处询问如何解决它，我被告知可以使用简单的 Javascript 来完成，所以我想我会尝试在这里寻求帮助。
我有一个 HTML 文件，里面有一个巨大的表格，结构如下。 我的任务是以某种方式识别/过滤/突出显示/标记/颜色或使单元格“table-date_two”的日期高于（更新日期）高于“table-date_one”中的日期的那些行引人注目. 因此，比较每一行中的两个日期，并标记/颜色/突出显示/过滤第二个日期比第一个日期新的日期。 理想情况下，结果是人们可以查看具有数千或行的此表，并快速识别 date_two 比 date_one 更新的那些。 这需要是内联 Javascript，我可以将其粘贴到 HTML 文件中，并在未连接到互联网的计算机上的浏览器中打开它。
非常感谢您的帮助！
我寻求帮助的第一个人建议使用正则表达式，并说它能够搜索日期并进行比较，但事实证明我无法理解正则表达式，它主要只是字符而不是单词，而且它们都是“嵌套”得很深的。那显然不适合我的大脑。
我对 HTML 有点熟悉，我已经看到 JS 嵌入其中，所以我认为这可能是路线，但我不能自己生成代码。
<table class="stuff">
<thead>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="one">some text or link or image</td>
<td class="table-date_one">4 May 2023, 12:52 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">3 May 2023, 7:11 am</td>
<td class="four">some more stuff</td>
<td class="five">even more stuff</td>
</tr>
<tr role="row" class="even">
<td class="one">some text or link or image</td>
<td class="table-date_one">17 November 2018, 5:33 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">1 May 2022, 3:42 am</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
<tr role="row" class="odd">
<td class="one">some text or link or image</td>
<td class="table-date_one">12 April 2021, 11:22 pm</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">2 May 2023, 6:44 pm</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
<tr role="row" class="even">
<td class="one">some text or link or image</td>
<td class="table-date_one">21 April 2023, 10:10 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">2 May 2023, 5:21 am</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
</tbody>通常 SO 不适用于 e-lance 请求，我们确实希望提问者付出一些努力。
对于知情者来说是微不足道的
const msSinceEpoch = str => Date.parse(str); // returns an int
window.addEventListener("DOMContentLoaded", () => { // on page load
document.querySelectorAll(".stuff tbody tr").forEach(row => {
const dateCell1 = row.querySelector(".table-date_one");
const dateCell2 = row.querySelector(".table-date_two");
const date1 = msSinceEpoch(dateCell1.textContent);
const date2 = msSinceEpoch(dateCell2.textContent);
const greater = date2 > date1;
row.classList.toggle("highlight", greater);
dateCell2.classList.toggle("greater", greater);
});
});.highlight {
color: red;
}
.greater { font-weight: bold;}<table class="stuff">
<thead>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="one">some text or link or image</td>
<td class="table-date_one">4 May 2023, 12:52 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">3 May 2023, 7:11 am</td>
<td class="four">some more stuff</td>
<td class="five">even more stuff</td>
</tr>
<tr role="row" class="even">
<td class="one">some text or link or image</td>
<td class="table-date_one">17 November 2018, 5:33 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">1 May 2022, 3:42 am</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
<tr role="row" class="odd">
<td class="one">some text or link or image</td>
<td class="table-date_one">12 April 2021, 11:22 pm</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">2 May 2023, 6:44 pm</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
<tr role="row" class="even">
<td class="one">some text or link or image</td>
<td class="table-date_one">21 April 2023, 10:10 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">2 May 2023, 5:21 am</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
</tbody>遍历行并比较包含日期的单元格。
const theTable = document.querySelector(`.stuff`);
// convert rows (Nodelist) to Array ([...])
// and loop the rows
[...theTable.rows].forEach(row => {
// convert the content of date cells to Date
// Note: check in different browsers if this conversion works everywhere
const [dateOne, dateTwo] = [
new Date(row.querySelector(`td.table-date_one`)),
new Date(row.querySelector(`td.table-date_two`)),
];
// compare and assign class when two > one
if (new Date(dateTwo.textContent) > new Date(dateOne.textContent)) {
row.classList.add(`marked`);
}
});tr.marked td.table-date_one {
color: #c0c0c0;
}
tr.marked td.table-date_two {
color: red;
background: yellow;
}<table class="stuff">
<thead>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="one">some text or link or image</td>
<td class="table-date_one">4 May 2023, 12:52 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">3 May 2023, 7:11 am</td>
<td class="four">some more stuff</td>
<td class="five">even more stuff</td>
</tr>
<tr role="row" class="even">
<td class="one">some text or link or image</td>
<td class="table-date_one">17 November 2018, 5:33 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">1 May 2022, 3:42 am</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
<tr role="row" class="odd">
<td class="one">some text or link or image</td>
<td class="table-date_one">12 April 2021, 11:22 pm</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">2 May 2023, 6:44 pm</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
<tr role="row" class="even">
<td class="one">some text or link or image</td>
<td class="table-date_one">21 April 2023, 10:10 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">2 May 2023, 5:21 am</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
</tbody><table class="stuff">
<thead>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="one">some text or link or image</td>
<td class="table-date_one">4 May 2023, 12:52 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">3 May 2023, 7:11 am</td>
<td class="four">some more stuff</td>
<td class="five">even more stuff</td>
</tr>
<tr role="row" class="even">
<td class="one">some text or link or image</td>
<td class="table-date_one">17 November 2018, 5:33 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">1 May 2022, 3:42 am</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
<tr role="row" class="odd">
<td class="one">some text or link or image</td>
<td class="table-date_one">12 April 2021, 11:22 pm</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">2 May 2023, 6:44 pm</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
<tr role="row" class="even">
<td class="one">some text or link or image</td>
<td class="table-date_one">21 April 2023, 10:10 am</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="table-date_two">2 May 2023, 5:21 am</td>
<td class="four">some more stuff</td>
<td class="five">some more stuff</td>
</tr>
</tbody>
</table>
<!-- Inline script -->
<script>
// A function that parses a date string and returns the amount of milliseconds
// between 1 January 1970 00:00:00 and the date.
const parseDate = (dateString) => {
// Split the string into an array of strings using non alphanumeric characters
// as the splitting condition.
const parts = dateString.split(/[^A-z0-9]+/);
// Preformatting for ISO 8601 date format that we'll be using later.
// Get the first array member (the day) and ensure it is 2 digits.
const day = parts[0].padStart('0', 2);
// Get the second array member (the month) and get the first 3 characters.
const month = parts[1].slice(0, 3);
// Get the forth array member (the hour), add 12 if the sixth array member (am/pm)
// is pm, to convert the hour to 24-hour format and ensure it is 2 digits.
const hour = ((parts[5] === 'pm' ? 12 : 0) + parseInt(parts[3])).toString().padStart('0', 2);
return Date.parse(`${day} ${month} ${parts[2]} ${hour}:${parts[4]}:00 GMT`);
};
// For every row.
document.querySelectorAll('tbody tr').forEach(row => {
// Get the date one cell element text, removing any leading or trailing whitespace.
const dateOne = row.querySelector('.table-date_one').innerText.trim();
// Get the date two cell element text, removing any leading or trailing whitespace.
const dateTwo = row.querySelector('.table-date_two').innerText.trim();
// If more milliseconds has passed for dateTwo than dateOne, then
// dateTwo is more recent:
if (parseDate(dateTwo) > parseDate(dateOne)) {
// Do whatever manipulation you need here.
row.style.backgroundColor = 'red';
}
});
</script>