Question

背景

我正在尝试显示用户的预定事件列表，为此我将显示一个包含两列的引导表，一个是生成的15m时间间隔列表，另一个是事件本身。

预定活动有绿色背景。

问题

由于我设置表格和foreach循环的方式，我无法在<td>标记中添加一个类，以根据是否有事件来更改背景颜色。

到目前为止我尝试了什么

以下是我显示数据的视图，我添加了一个带有类＆＃39;事件＆＃39;具有绿色背景以表示事件已安排。

<table class="table table-striped table-hover table-bordered">
    <thead>
        <tr>
            <th>Time</th>
            <th>Event</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <!-- shows times as 1472792400 => 6:00, 6:15, 6:30 -->
        <?php foreach ($intervals as $seconds => $interval) : ?>
            <tr>

                <td class="col-md-1">
                    <div class="text-center">
                        <i class="fa fa-clock-o"></i>
                        <?php echo $interval; ?>
                    </div>
                </td>

                <td class="col-md-10">
                    <?php foreach ($events as $key => $event) : ?>
                            <?php if ($event->seconds_start == $seconds) : ?>
                                <div class="event-header">
                                    <span class="label label-default"><?php echo $event->event; ?></span>
                                </div>
                            <?php elseif ($event->seconds_start < $seconds && $event->seconds_end >= $seconds + 900) : ?>
                                <div class="event">&nbsp;</div>
                            <?php else : ?>
                                <!-- nothing -->
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </td>
                <td class="col-md-1"></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

这是我的活动表

和我的css文件

.event-header {
    color:#fff;
    font-weight:600;
    background: #75a575;
    border-bottom:1px solid #75a575 !important;
    margin: -8px -10px -10px;
}

.event {
    background: #abdbab;
    margin: -8px -10px -10px;
}

以下是迄今为止事件页面的显示方式

问题

所以基本上如果事件时间等于显示的时间，那么我想改变<td>的整个背景颜色，以表明有一个事件被安排...... 但是我不能在<td>添加一个类，因为我的逻辑块在<td></td>已经之内。我该怎么做？

更新1

在if语句中添加<td>标记（理想的解决方案），就像这样......

    <table class="table table-striped table-hover table-bordered">
    <thead>
        <tr>
            <th class="text-center">Time</th>
            <th>Event</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($intervals as $seconds => $interval) : ?>
            <tr>

                <td class="col-md-1">
                    <div class="text-center">
                        <i class="fa fa-clock-o"></i>
                        <?php echo $interval; ?>
                    </div>
                </td>

                <?php foreach ($events as $key => $event) : ?>
                        <?php if ($event->seconds_start == $seconds) : ?>
                            <td class="col-md-10 event-header">
                                <span class="label label-default"><?php echo $event->event; ?></span>
                            </td>
                        <?php elseif ($event->seconds_start < $seconds && $event->seconds_end >= $seconds + 900) : ?>
                            <td class="col-md-10 event"><td>
                        <?php else : ?>
                            <td class="col-md-10"><td>
                        <?php endif; ?>
                    <?php endforeach; ?>

                <td class="col-md-1"></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

生成以下视图：

更新2

靠近，在else语句中没有显示任何内容，但布局仍然非常破碎，我很难处理我出错的地方......

<table class="table table-striped table-hover table-bordered">
    <thead>
        <tr>
            <th class="text-center">Time</th>
            <th>Event</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($intervals as $seconds => $interval) : ?>
            <tr>
                <td class="col-md-1">
                    <div class="text-center">
                        <i class="fa fa-clock-o"></i>
                        <?php echo $interval; ?>
                    </div>
                </td>

                <?php foreach ($events as $key => $event) : ?>
                    <?php if ($event->seconds_start == $seconds) : ?>
                        <td class="col-md-10 event-header">
                            <span class="label label-default"><?php echo $event->event; ?></span>
                        </td>
                    <?php elseif ($event->seconds_start < $seconds && $event->seconds_end >= $seconds + 900) : ?>
                        <td class="col-md-10 event">hello<td>
                    <?php else : ?>
                        <!-- nothing -->
                    <?php endif; ?>
                <?php endforeach; ?>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

现在显示......

正如你所看到的，当没有匹配时间的事件时，没有显示任何列，但是如果我在else语句中添加列，甚至添加一个中断，则布局会变得混乱......

Answer 1

如果要更改DOM节点的样式，已可以对其应用CSS规则。你无法解决这个问题。如果您不希望<td class="...">这样做，那么您必须执行<td style="...">。无论如何，你必须为此编写CSS才能实现。

Answer 2

规范存在但看起来浏览器还不支持它。

https://www.w3.org/TR/selectors4/#subject

建议的代码是这样的：

!td .event-header { /* styles */ }

我看到的唯一解决方案是回归JavaScript。它可能比重构PHP思想更糟糕。

在不添加类的情况下更改背景

2 个答案: