如何基于当前时间自动高亮HTML表格内下一个对应时段的行

修改调整点 #

• 新增.highlight高亮样式类，可自定义高亮效果
• 新增时间转换逻辑，将HH:MM格式时间转换为当日总分钟数，降低时间比较复杂度
• 新增高亮行匹配逻辑，完全符合你提出的规则要求
• 新增每分钟定时刷新逻辑，保证页面长时间停留时高亮状态正确
• 修复原代码中循环内重复插入tbody的冗余逻辑
• 新增跨天自动更新数据逻辑，零点后自动加载次日时段数据

完整实现代码 #

<html>
<style>
/* 高亮样式可自行调整 */
.highlight {
  background-color: #fff2cc;
  font-weight: bold;
}
table {
  border-collapse: collapse;
}
td {
  border: 1px solid #ccc;
  padding: 4px 12px;
}
</style>
<div id='timeTable'></div>
</html>
<script>
const days = ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'];
const months = ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'];
let currentDate = new Date().getDate();
let month = new Date().getMonth() + 1;
let prayerTimes = [];
let prayerNames = ['a', 'b', 'c', 'd', 'e', 'f'];
let table = document.createElement('table');
let tableBody = document.createElement('tbody');
let tableRows = []; // 存储所有表格行，方便后续更新高亮

fetch('https://izaachen.de/api/times/2021/Belgien/Antwerpen%20(Fl%C3%A4mische%20Region).txt/json')
    .then(data => data.json())
    .then(r => fillData(r));

// HH:MM时间转当日总分钟数
function timeToMin(timeStr) {
  const [hour, min] = timeStr.split(':').map(Number);
  return hour * 60 + min;
}

// 获取需要高亮的行索引，返回-1表示不高亮
function getHighlightIndex() {
  const now = new Date();
  const currentMin = now.getHours() * 60 + now.getMinutes();
  const timeMins = prayerTimes.map(t => timeToMin(t));
  for (let i = 0; i < timeMins.length; i++) {
    if (timeMins[i] > currentMin) {
      return i;
    }
  }
  // 所有时段都已过，不高亮
  return -1;
}

// 更新高亮状态
function updateHighlight() {
  // 先清除所有行的高亮
  tableRows.forEach(tr => tr.classList.remove('highlight'));
  const highlightIndex = getHighlightIndex();
  if (highlightIndex >= 0) {
    tableRows[highlightIndex].classList.add('highlight');
  }
  // 处理跨天情况，日期变化后重新拉取次日数据
  const nowDate = new Date().getDate();
  if (nowDate !== currentDate) {
    currentDate = nowDate;
    month = new Date().getMonth() + 1;
    fetch('https://izaachen.de/api/times/2021/Belgien/Antwerpen%20(Fl%C3%A4mische%20Region).txt/json')
      .then(data => data.json())
      .then(r => fillData(r));
  }
}

function fillData(data) {
  let today = data.times[month][currentDate];
  let i = 0;
  prayerTimes = [];
  for (let [key, value] of Object.entries(today)) {
    prayerTimes[i] = value.t;
    i++
  }
  fillView();
}

function fillView() {
  // 清空之前的内容，避免跨天重复渲染
  tableBody.innerHTML = '';
  tableRows = [];
  for (let i = 0; i < 6; i++) {
    let tr = document.createElement('tr');
    let name = document.createElement('td');
    let time = document.createElement('td');
    name.innerHTML = prayerNames[i];
    time.innerHTML = prayerTimes[i];
    tr.appendChild(name);
    tr.appendChild(time);
    tableRows.push(tr);
    tableBody.appendChild(tr);
  }
  // 移出循环，只插入一次tbody
  table.appendChild(tableBody);
  document.getElementById('timeTable').innerHTML = '';
  document.getElementById('timeTable').appendChild(table);
  // 首次执行高亮
  updateHighlight();
  // 每分钟更新一次高亮
  setInterval(updateHighlight, 60 * 1000);
}
</script>

内容的提问来源于stack exchange，提问作者Floortje123421