I'm no programmer, but I've seen some amount of simple code here and there. I was given a task. I asked around about how to solve it and I was told it could be done using simple Javascript, so I thought I would try to ask for help here.
I have an HTML file with a huge table in it structured like this. And my task would be to somehow identify/filter/highlight/mark/color or make eye-catching those rows in which the date of the cell "table-date_two" is higher (newer date) than the date in "table-date_one". So comparing the two dates in each row and mark/color/highlight/filter those where the second date is newer than the first. Ideally the result is that a human can look at this rable with thousands or rows and quickly identify the ones where date_two is newer than date_one. This needs to be inline Javascript that I can paste into the HTML file and open it in a browser on a computer not connected to the internet.
Thank you very much for any help!
The first person I asked for help suggested Regex and said that that is capable of searching for dates and comparing those but it turned out that I can't comprehend Regex it being mostly just characters and not words and it's all "nested" deeply. That was clearly not for my brain.
I'm somewhat familiar with HTML and I've seen JS embedded in it so I think that could be the route but I can't produce code on my own.
<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>Normally SO is not for e-lance requests, we do expect some effort from the asker.
It is trivial for those in the know.
Note the msSinceEpoch might need to be changed if you find a browser that does not parse your date string well, since only the ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sssZ) is explicitly specified to be supported
The script goes in the head of your page inside <script></script> tags, the CSS in a stylesheet.
const msSinceEpoch = str => Date.parse(str); // returns an int
window.addEventListener("DOMContentLoaded", () => { // on page load
document.querySelectorAll(".stuff tbody tr").forEach(row => { // ignore the thead
const dateCell1 = row.querySelector(".table-date_one");
const dateCell2 = row.querySelector(".table-date_two");
if (!dateCell1 || !dateCell1) return; // skip rows that do not have both cells
const date1 = msSinceEpoch(dateCell1.textContent);
const date2 = msSinceEpoch(dateCell2.textContent);
const greater = date2 > date1; // true or false
row.classList.toggle("highlight", greater); // set if greater
dateCell1.classList.toggle("greater", !greater); // set if not greater
dateCell2.classList.toggle("greater", greater); // set if 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="A">No date</td>
<td class="two">some text or link or image</td>
<td class="three">some text or link or image</td>
<td class="B">No date</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">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="odd">
<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>