javascript - 在45分钟之间的间隔中突出显示一天中的表行

这是我的桌子。我想每隔45分钟突出显示一行表格，具体取决于现在的时间，并且应该在用户在页面上时动态更新。

我不知道，因为我不熟悉jquery或javascript。任何帮助将不胜感激。

<div class="table">
     <table>

 <tr>  <td id="r1">1</td><td>10:15 - 11:00</td> </tr>

 <tr>  <td id="r3">2</td><td>11:00 - 11:45</td> </tr>

 <tr>  <td id="r5">3</td><td>11:45 - 12:30</td> </tr>

 <tr>  <td id="r7">4</td><td>12:30 - 1:15</td> </tr>

 <tr>  <td id="r9">5</td><td>1:15 - 2:00</td> </tr>

 <tr>  <td id="r11">6</td><td>2:00 - 2:45</td> </tr>

 <tr>  <td id="r13">7</td><td>2:45 - 3:30</td> </tr>
</table>

最佳答案

可以用一个对象数组来做到这一点，但是我很懒，所以我做了一次数组和一个类名。或者，根据返回的时间（例如“ id_1100”）对id进行设置。我只是通过给定的示例使它起作用。

也可以摆脱now变量，因为它仅使用一次，但是这会使它更加难以阅读。

哦，如果您在上午10:15之前或下午3:30之后观看此演示，它将无法正常工作，并且用户在页面上时我不会动态更新，但是您可以设置自己的计时器并清除/设置正确行的背景。

编辑：可能在Opera Mini中工作

var now = new Date().getHours() * 100 + new Date().getMinutes();
var times = [1015, 1100, 1145, 1230, 1315, 1400, 1445, 1530];
var ids = ['r1', 'r3', 'r5', 'r7', 'r9', 'r11', 'r13'];
var selected = '';
for (var ix = 0; ix < times.length; ix++) {
  if (now >= times[ix]) {
    selected = ids[ix];
  }
}
if (selected) document.getElementById(selected).parentElement.style.backgroundColor = 'yellow';

<table>

  <tr>
    <td id="r1">1</td>
    <td>10:15 - 11:00</td>
  </tr>

  <tr>
    <td id="r3">2</td>
    <td>11:00 - 11:45</td>
  </tr>

  <tr>
    <td id="r5">3</td>
    <td>11:45 - 12:30</td>
  </tr>

  <tr>
    <td id="r7">4</td>
    <td>12:30 - 1:15</td>
  </tr>

  <tr>
    <td id="r9">5</td>
    <td>1:15 - 2:00</td>
  </tr>

  <tr>
    <td id="r11">6</td>
    <td>2:00 - 2:45</td>
  </tr>

  <tr>
    <td id="r13">7</td>
    <td>2:45 - 3:30</td>
  </tr>
</table>