Question

我正在使用Node.js，并创建了一个日历页面，该页面应在.ejs文件中每天显示3个用餐选项。日历周只有5天。我正在从psql数据库和名为day的节点模型中填充餐食选项。我已将表格指定为具有5列，但是第6天出现在第5天旁边，而不是在下面的行中。

这是我目前正在使用的代码：

<div class="calendarMonth">
    <table id="month" style="width:100%">
        <colgroup>
            <col span="5">
        </colgroup>

        <th colspan="5">October 2018</th>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        </tr>

        <tr>
            <% days.forEach((day) => { %>
            <td>
                <%= day.id %><br>
                <%= day.mealOne %><br>
                <%= day.mealTwo %><br>
                <%= day.mealThree %><br>
            </td>
            <% }) %>
        </tr>
    </table>
</div>

Answer 1

您需要每5天在<tr></tr>块中添加一个forEach标记。

编辑

假设day.id为您提供星期几，您可以按以下方式修改代码：

<div class="calendarMonth">
    <table id="month" style="width:100%">
        <colgroup>
            <col span="5">
        </colgroup>

        <th colspan="5">October 2018</th>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        </tr>

        <% days.forEach((day) => { %>

        <% if(day.id == "Monday") { %>
        <tr>
        <% } %>

            <td>
                <%= day.id %><br>
                <%= day.mealOne %><br>
                <%= day.mealTwo %><br>
                <%= day.mealThree %><br>
            </td>

        <% if(day.id == "Monday") { %>
        </tr>
        <% } %>

        <% }) %>
    </table>
</div>

为什么我的HTML表不遵守指定的布局？

1 个答案: