skip to Main Content

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>

3

Answers


  1. 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"); 
        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
        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="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>
    Login or Signup to reply.
  2. <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>
    Login or Signup to reply.
  3. Loop through the rows and compare the cells containing the date.

    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 
      // of text to Date works everywhere
      const [dateOne, dateTwo] = [
        new Date(row.querySelector(`td.table-date_one`).textContent),
        new Date(row.querySelector(`td.table-date_two`).textContent),
      ];
    
      // compare and assign class when two > one or one > two
      row.classList.add(dateTwo > dateOne ? `markSecond` : `markFirst`);
      row.querySelector(`.moreOrLess`).textContent = dateTwo > dateOne ? `<` : `>`;
    });
    tr.markSecond td.table-date_one {
      color: #c0c0c0;
    }
    
    tr.markSecond td.table-date_two {
      color: red;
      background: yellow;
    }
    
    tr.markFirst td.table-date_one {
      color: red;
      background: yellow;
    }
    
    tr.markFirst td.table-date_two {
      color: #c0c0c0;
    }
    
    .moreOrLess {
      font-weight: bold;
      font-size: 1.2rem;
      color: red;
      padding: 0 5px;
      background-color: #eee;
    }
    <table class="stuff">
      <thead>
      </thead>
      <tbody>
        <tr role="row" class="odd">
          <td class="table-date_one">4 May 2023, 12:52 am</td>
          <td class="moreOrLess"><td>
          <td class="table-date_two">3 May 2023, 7:11 am</td>
        </tr>
        <tr role="row" class="even">
          <td class="table-date_one">17 November 2018, 5:33 am</td>
          <td class="moreOrLess"><td>
          <td class="table-date_two">1 May 2022, 3:42 am</td>
        </tr>
        <tr role="row" class="odd">
          <td class="table-date_one">12 April 2021, 11:22 pm</td>
          <td class="moreOrLess"><td>
          <td class="table-date_two">2 May 2023, 6:44 pm</td>
        </tr>
        <tr role="row" class="even">
          <td class="table-date_one">21 April 2023, 10:10 am</td>
          <td class="moreOrLess"><td>
          <td class="table-date_two">2 May 2023, 5:21 am</td>
        </tr>
      </tbody>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search