突出显示文本并将其添加到小时表答案

【问题标题】：Highlighting and adding text to and hours table突出显示文本并将其添加到小时表
【发布时间】：2023-04-01 17:15:01
【问题描述】：

所以我有一个开放时间表（从表达式引擎动态拉入）。我有一个脚本，它向<tr> 添加了一个类，以突出显示该行是打开的。但是我无法弄清楚两件事。我正在尝试添加课程，但仅限于特定时间、特定日期，例如工作日的晚上 8:30 至下午 5 点。

这是小时表（实际小时数由 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>

【问题讨论】：

"首先，我需要把js实际打开到实际营业时间"——这是什么意思？
不应该是 document.getElementsByTagName('TR')[date].className += "open-now"; ?
CSS 会将“立即打开”添加到第三个表格单元格中：TR.open-now TD:last-of-type::after {content: "Open Now!";}
@DavidThomas 的意思是我需要一些方法来确保课程只在他们开放的实际时间内应用。

标签： javascript jquery expressionengine

【解决方案1】：

如果我错了，请纠正我，但你想突出显示我们当前所在的星期几

由于您使用的是纯 javascript，我创建了一个包含星期几的数组，所以我可以获得我们需要的 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

但是，如果您只是在表格形成时添加类，这会简单得多。

【讨论】：