突出顯示和添加文本和小時表

所以我有一個開放時間的表格（它們從表達式引擎動態地拉入）。我有一個腳本，向<tr>添加一個類，以突出顯示該行處於打開狀態。但我無法弄清楚兩件事。我正在嘗試添加課程，但只能在某些時間，某些日子，例如平日的8:30 - 5pm。突出顯示和添加文本和小時表

這是（正在EE生成的實際時間）

<table class="table-plain branch-hours"> 
    <tbody> 
    <tr class="Monday"> 
     <td>Monday</td> 
     <td>8:30am - 5pm</td> 

     <td></td> 
    </tr><tr class="Tuesday"> 
     <td>Tuesday</td> 
     <td>8:30am - 5pm</td> 

     <td></td> 
    </tr><tr class="Wednesday"> 
     <td>Wednesday</td> 
     <td>8:30am - 5pm</td> 

     <td></td> 
    </tr><tr class="Thursday"> 
     <td>Thursday</td> 
     <td>8:30am - 5pm</td> 

     <td></td> 
    </tr><tr class="Friday"> 
     <td>Friday</td> 
     <td>8:30am - 5pm</td> 

     <td></td> 
    </tr><tr class="Saturday"> 
     <td>Saturday</td> 
     <td>Closed</td> 

     <td></td> 
    </tr><tr class="Sunday"> 
     <td>Sunday</td> 
     <td>Closed</td> 

     <td></td> 
    </tr> 
</tbody>

的小時表，這是JS腳本

<script type="text/javascript"> 
var date = new Date().getDay() -1; 
document.getElementsByTagName('TR')[date].className += " open-now"; 
</script>

來源

2015-07-13 Peter Binks

「*首先，我需要實際的js到實際的小時打開*」 - 這是什麼意思？ –

不應該是document.getElementsByTagName（'TR'）[date] .className + =「open-now」; ？ – m69

CSS將在第三個表格單元格中添加「open now」：TR.open-now TD：last-of-type :: after {content：「立即打開！」;} – m69

糾正我，如果我錯了，但是您想要突出顯示我們當前所在的星期幾

由於您使用的是純j avascript，我創建了一個星期幾的數組，所以我可以得到我們需要的TR，我們正在按照類進行搜索，所以我們得到一個數組，在這個例子中，我假設我們只有一個星期一，星期二等。 ..

var dayofWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday']; 

var day = new Date().getDay(); 
var now = new Date(); 

var trs = document.getElementsByClassName(dayofWeek[day]); 
var tdHour = trs[0].getElementsByTagName('TD')[1]; 
var hours = tdHour.innerHTML.split(' - ') 
var from = hours[0].replace('am','').replace('pm','').split(':'); 
var to = hours[1].replace('am','').replace('pm','').split(':'); 

if(hours[0].indexOf('pm') > -1) 
    from[0] = parseInt(from[0]) +12; 

if(hours[1].indexOf('pm') > -1) 
    to[0] = parseInt(to[0]) +12; 

var dFrom = new Date(); 

dFrom.setHours(from[0]); 

if(from.length > 1) 
    dFrom.setMinutes(from[1]); 

var dTo = new Date(); 

dTo.setHours(to[0]); 

if(to.length > 1) 
    dTo.setMinutes(to[1]); 

if(now >= dFrom && now <= dTo) 
    trs[0].className = 'open-now';

Here is a link for the working Fiddle

但是，這將是非常非常簡單的，如果你想補充類形成的表時。

來源

2015-07-15 20:25:38 Hoku

突出顯示和添加文本和小時表

回答

相關問題