如何根据单元格时间戳值更改表格行的样式

Question

我有一个包含日期列的表。 此列包含从过去到未来的日期，包括当前时间，间隔约为 7 分钟（可能会更改）。 我需要用绿色为具有当前值的行着色，并在下次到达时将绿色移动到下一行。 是否可以收听时间值并更改行的样式？ 我可以为当前值着色，但是随着时间的推移，样式不会移动到下一行，因为代码在页面加载时执行了一次。

这是我的代码尝试：我在 HTML 表部分使用 vue：

<tbody v-for='row in rows' :key='row.id'>
  <tr :style="{'background-color': dateFormat(row.date) ?'green' :'' }">
    ...
  </tr>
</tbody>

在方法中：

dateFormat(d) {
  const time = new Date(d);
  const cc = new Date();
  if (time.getMinutes() === cc.getMinutes()) return true;
  return false;
}

任何帮助将不胜感激。 提前致谢。

Answer 1

没有太多关于您要将操作集成到哪种表格的信息。 您可以应用以下说明来实现您想要的。

制作任务的“模型”，首先，读取活动行应该更改为 JS 数组的日期（示例代码中的data ）。 在该数组中包含表格行也很方便，当您不必查询 DOM 来查找要突出显示的行时，这可以节省一些时间。 然后创建一些变量来存储任务（ current ， next ）的state的一些信息。 此信息用于控制 state。 最后，创建一个计时器，它会在有下一个日期等待时运行。 根据您存储在 model 中的值计算延迟。 像这样的东西：

 // Fill the dates (for the example only) const rows = Array.from(document.querySelector('#traced').rows); fillDates(new Date(), 5); // constant 5 = increase time [second] // A date can be passed to Date constructor as an acceptable string too // Creates the timer (function() { const tbody = document.querySelector('#traced'), rows = Array.from(tbody.rows), data = rows.map(row => { const time = new Date(row.cells[1].textContent).getTime(); // The constant 1 above is the date column number of the table return {row, time}; }); let now = Date.now(), last = data.length - 1, next = data.findIndex(row => row.time > now), current = Math.max(-1, next - 1); if (now > data[last].time) { // All the dates are in the past, no need for a timer data[last].row.classList.add('active'); return; } // Updates row highlighting and counters, the timed function function activateRow() { // Update highlights if (current > 0) { // Remove the current highlight data[current - 1].row.classList.remove('active'); } if (current > -1 && next) { // Highlight the current row data[current].row.classList.add('active'); } // Set the timer if needed if (next > last) {return;} // Quit, no more dates to await const delay = data[next].time - Date.now(); window.setTimeout(activateRow, delay); // Update counters current += 1; next += 1; } activateRow(); }()); // Emulates the server-side dynamic table filling (for the example only) function fillDates(base, gap = 15000) { if (gap < 1000) { gap *= 1000; } gap += Math.floor(Math.random() * 3000); const zone = new Date().getTimezoneOffset(), date = new Date(base).getTime() - zone * 60000; rows.forEach((row, index) => { const dte = new Date(date + gap * index).toISOString(), end = dte.length - 5; row.lastElementChild.textContent = dte.substring(0, end); }); }

 .active { background: green; }

 <table> <tbody id="traced"> <tr><td>Date 1</td><td></td></tr> <tr><td>Date 2</td><td></td></tr> <tr><td>Date 3</td><td></td></tr> <tr><td>Date 4</td><td></td></tr> <tr><td>Date 5</td><td></td></tr> <tr><td>Date 6</td><td></td></tr> </tbody> </table>

当您将示例集成到您自己的代码中时，仅将 IIFE 包含到您的 JS 代码中，片段的其他部分可以使代码在 StackSnippet 中合理地运行成为可能，尽管如此，访问者的时区。 当然，您也必须在 CSS 中定义active class 。 您也不应该在服务器上包含活动行的样式，JS 片段负责突出显示。

根据表格中的日期格式，您可能还需要根据使用的格式编辑代码，甚至更改实际日期，因为根据访问者的时区，您在服务器上添加的日期可能会严重偏离其他时区，自动荧光笔将不起作用。

还有一个 jsFiddle可以玩。