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

按照每天的时间在45分钟间隔内突出显示表行

1 个答案: