突出显示和添加文本和小时表

所以我有一个开放时间的表格（它们从表达式引擎动态地拉入）。我有一个脚本，向<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

突出显示和添加文本和小时表

回答

相关问题