根据一天中间隔 45 分钟之间的时间突出显示表行

Question

这是我的表格。我想以 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>

Answer 1

可以用一个对象数组来做到这一点，但我很懒，所以我做了一个时间数组和一个类名数组。或者，根据返回的时间使 id 成为某种内容(如"id_1100"(。我只是让它与给定的示例一起工作。

也可以摆脱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>