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