使用JavaScript逐行迭代HTML表格并比较单元格中的日期,在浏览器中离线运行,无需外部依赖

0sgqnhkj  于 2023-05-05  发布在  Java
关注(0)|答案(3)|浏览(77)

我不是程序员,但我在这里和那里看到了一些简单的代码。我被赋予了一项任务。我四处询问如何解决它,我被告知可以使用简单的Javascript来完成,所以我想我会尝试在这里寻求帮助。
我有一个HTML文件,其中有一个巨大的表,结构如下。我的任务是以某种方式识别/过滤/突出显示/标记/颜色或使那些单元格“table-date_two”的日期高于“table-date_one”中的日期的行引人注目。因此,比较每行中的两个日期,并标记/颜色/突出显示/过滤第二个日期比第一个日期新的日期。理想情况下,结果是一个人可以查看这个有数千行的表,并快速识别出date_two比date_one新的表。这需要内联Javascript,我可以粘贴到HTML文件,并在未连接到互联网的计算机上的浏览器中打开它。
非常感谢您的任何帮助!
我寻求帮助的第一个人建议使用Regex,并说它能够搜索日期并进行比较,但事实证明,我无法理解Regex,它主要是字符而不是单词,而且都是“嵌套”的。这显然不是为了我的大脑。
我对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>
iyzzxitl

iyzzxitl1#

通常情况下,SO不适用于电子邮件请求,我们确实希望请求者做出一些努力。
这对那些知道的人来说是微不足道的。
请注意,如果您发现浏览器不能很好地解析日期字符串,则可能需要更改msSinceEpoch,因为only the ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sssZ) is explicitly specified to be supported
该脚本位于页面头部的<script></script>标签中,即样式表中的CSS。

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

fhg3lkii2#

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

bq9c1y663#

循环遍历行并比较包含日期的单元格。

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>

相关问题