You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现按周分Tab展示餐食？解决餐食混排问题

avatar
云上老周
2026-7-5
实现按Week标签页分离餐食内容的修改方案

问题描述

当前餐食内容展示时出现混排，需将第1周的餐食仅显示在Week 1标签页下，第2周的餐食仅显示在Week 2标签页下，请问如何修改现有代码实现该需求？

修改后的完整代码 

<!-- 标签页导航 -->
<ul class="nav nav-tabs" id="weekTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="week1-tab" data-bs-toggle="tab" data-bs-target="#week1-content" type="button" role="tab" aria-controls="week1-content" aria-selected="true">Week 1</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="week2-tab" data-bs-toggle="tab" data-bs-target="#week2-content" type="button" role="tab" aria-controls="week2-content" aria-selected="false">Week 2</button>
    </li>
</ul>

<!-- 标签页内容容器 -->
<div class="tab-content" id="weekTabsContent">
    <!-- Week 1 内容面板 -->
    <div class="tab-pane fade show active" id="week1-content" role="tabpanel" aria-labelledby="week1-tab">
        <table id="user-list-table-week1" class="table table-striped" role="grid" data-toggle="data-table" style="font-size: 13px;">
            <tr>
                <th>Date</th>
                <th>Breakfast</th>
                <th>Lunch</th>
                <th>Snacks</th>
                <th>Dinner</th>
            </tr>
            @php
            $i = 0;
            $week = 1;
            $currentDt = $dt; // 复制初始日期，避免修改原变量影响第二次循环
            $fromm = new DateTime($currentDt);
            $firstDayName = strtolower($fromm->format('l'));
            $dayName = strtolower($fromm->format('l'));
            @endphp

            @for ($i = 0; $i < $diff; $i++) 
                @php 
                    $menuCategoryCG0001=array_filter($mnu_arr, function ($ma) use ($week, $dayName) { 
                        return $ma['category_code']=='CG0001' && $ma['week'] == $week && $ma['day'] == $dayName; 
                    }); 
                    $menuCategoryCG0002=array_filter($mnu_arr, function ($ma) use ($week, $dayName) { 
                        return $ma['category_code']=='CG0002' && $ma['week'] == $week && $ma['day'] == $dayName; 
                    }); 
                    $menuCategoryCG0003=array_filter($mnu_arr, function ($ma) use ($week, $dayName) { 
                        return $ma['category_code']=='CG0003' && $ma['week'] == $week && $ma['day'] == $dayName; 
                    }); 
                    $menuCategoryCG0004=array_filter($mnu_arr, function ($ma) use ($week, $dayName) { 
                        return $ma['category_code']=='CG0004' && $ma['week'] == $week && $ma['day'] == $dayName; 
                    }); 
                @endphp 

                @if($week == 1) <!-- 仅渲染Week1的行 -->
                <tr style="height: 50px">
                    <td>
                        <input type="hidden" value="{{ $custom_plan_id }}" name="customplanid">
                        <input type="hidden" value="{{ $diff }}" name="numdays">
                        <input type="hidden" id="mdbf-{{ $i }}">
                        <input type="text" name="date-{{ $i }}" value="{{ $currentDt }}" class="btn btn-outline-primary rounded iq-col-masonry-block"><br><br>
                        
                        <input type="text"  value="Week-{{   $week  }}" class="btn btn-outline-primary rounded iq-col-masonry-block">
                        
                    </td>
                    <td>
                        @foreach ($menuCategoryCG0001 as $ma)
                        <div id="button-{{ $ma['id'] }}" href="#" class="btn btn-outline-primary rounded iq-col-masonry-block">
                            <img src="{{ asset('menuimages/' . $ma['image']) }}" width="81px"><br>
                            <input type="checkbox" name="{{ $ma['category_code'] . '-' . $i }}[]" value="{{ $ma['id'] }}" class="check">
                            <p style="font-size: 10px">{{ $ma['name'] }}</p>
                        </div><br><br>
                        @endforeach
                    </td>
                    <td>
                        @foreach ($menuCategoryCG0002 as $ma)
                        <div id="button-{{ $ma['id'] }}" href="#" class="btn btn-outline-primary rounded iq-col-masonry-block">
                            <img src="{{ asset('menuimages/' . $ma['image']) }}" width="81px"><br>
                            <input type="checkbox" name="{{ $ma['category_code'] . '-' . $i }}[]" value="{{ $ma['id'] }}" class="check">
                            <p style="font-size: 10px">{{ $ma['name'] }} <br><br>Protein/Carb : {{ $lunchp_c }}</p>
                        </div><br><br>
                        @endforeach
                    </td>
                    <td>
                        @foreach ($menuCategoryCG0003 as $ma)
                        <div id="button-{{ $ma['id'] }}" href="#" class="btn btn-outline-primary rounded iq-col-masonry-block">
                            <img src="{{ asset('menuimages/' . $ma['image']) }}" width="81px"><br>
                            <input type="checkbox" name="{{ $ma['category_code'] . '-' . $i }}[]" value="{{ $ma['id'] }}" class="check">
                            <p style="font-size: 10px">{{ $ma['name'] }}</p>
                        </div><br><br>
                        @endforeach
                    </td>
                    <td>
                        @foreach ($menuCategoryCG0004 as $ma)
                        <div id="button-{{ $ma['id'] }}" href="#" class="btn btn-outline-primary rounded iq-col-masonry-block">
                            <img src="{{ asset('menuimages/' . $ma['image']) }}" width="81px"><br>
                            <input type="checkbox" name="{{ $ma['category_code'] . '-' . $i }}[]" value="{{ $ma['id'] }}" class="check">
                            <p style="font-size: 10px">{{ $ma['name'] }} <br><br>Protein/Carb : {{ $dinnerp_c }}</p>
                        </div><br><br>
                        @endforeach
                    </td>
                </tr>
                @endif

                @php
                $currentDt = date('d-m-Y', strtotime($currentDt . ' + 1 days'));
                $day = new DateTime($currentDt);
                $day = $day->format('l');
                if ($day == 'Friday') {
                $currentDt = date('d-m-Y', strtotime($currentDt . ' + 1 days'));
                }
                $fromm = new DateTime($currentDt);
                $dayName = strtolower($fromm->format('l'));
                if($firstDayName === $dayName){
                    $week++;
                }
                if($week == 3){
                    $week = 1;
                }
                if($week == 4){
                    $week = 2;
                }
                @endphp
            @endfor
        </table>
    </div>

    <!-- Week 2 内容面板 -->
    <div class="tab-pane fade" id="week2-content" role="tabpanel" aria-labelledby="week2-tab">
        <table id="user-list-table-week2" class="table table-striped" role="grid" data-toggle="data-table" style="font-size: 13px;">
            <tr>
                <th>Date</th>
                <th>Breakfast</th>
                <th>Lunch</th>
                <th>Snacks</th>
                <th>Dinner</th>
            </tr>
            @php
            $i = 0;
            $week = 1;
            $currentDt = $dt; // 重新初始化日期
            $fromm = new DateTime($currentDt);
            $firstDayName = strtolower($fromm->format('l'));
            $dayName = strtolower($fromm->format('l'));
            @endphp

            @for ($i = 0; $i < $diff; $i++) 
                @php 
                    $menuCategoryCG0001=array_filter($mnu_arr, function ($ma) use ($week, $dayName) { 
                        return $ma['category_code']=='CG0001' && $ma['week'] == $week && $ma['day'] == $dayName; 
                    }); 
                    $menuCategoryCG0002=array_filter($mnu_arr, function ($ma) use ($week, $dayName) { 
                        return $ma['category_code']=='CG0002' && $ma['week'] == $week && $ma['day'] == $dayName; 
                    }); 
                    $menuCategoryCG0003=array_filter($mnu_arr, function ($ma) use ($week, $dayName) { 
                        return $ma['category_code']=='CG0003' && $ma['week'] == $week && $ma['day'] == $dayName; 
                    }); 
                    $menuCategoryCG0004=array_filter($mnu_arr, function ($ma) use ($week, $dayName) { 
                        return $ma['category_code']=='CG0004' && $ma['week'] == $week && $ma['day'] == $dayName; 
                    }); 
                @endphp 

                @if($week == 2) <!-- 仅渲染Week2的行 -->
                <tr style="height: 50px">
                    <td>
                        <input type="hidden" value="{{ $custom_plan_id }}" name="customplanid">
                        <input type="hidden" value="{{ $diff }}" name="numdays">
                        <input type="hidden" id="mdbf-{{ $i }}">
                        <input type="text" name="date-{{ $i }}" value="{{ $currentDt }}" class="btn btn-outline-primary rounded iq-col-masonry-block"><br><br>
                        
                        <input type="text"  value="Week-{{   $week  }}" class="btn btn-outline-primary rounded iq-col-masonry-block">
                        
                    </td>
                    <td>
                        @foreach ($menuCategoryCG0001 as $ma)
                        <div id="button-{{ $ma['id'] }}" href="#" class="btn btn-outline-primary rounded iq-col-masonry-block">
                            <img src="{{ asset('menuimages/' . $ma['image']) }}" width="81px"><br>
                            <input type="checkbox" name="{{ $ma['category_code'] . '-' . $i }}[]" value="{{ $ma['id'] }}" class="check">
                            <p style="font-size: 10px">{{ $ma['name'] }}</p>
                        </div><br><br>
                        @endforeach
                    </td>
                    <td>
                        @foreach ($menuCategoryCG0002 as $ma)
                        <div id="button-{{ $ma['id'] }}" href="#" class="btn btn-outline-primary rounded iq-col-masonry-block">
                            <img src="{{ asset('menuimages/' . $ma['image']) }}" width="81px"><br>
                            <input type="checkbox" name="{{ $ma['category_code'] . '-' . $i }}[]" value="{{ $ma['id'] }}" class="check">
                            <p style="font-size: 10px">{{ $ma['name'] }} <br><br>Protein/Carb : {{ $lunchp_c }}</p>
                        </div><br><br>
                        @endforeach
                    </td>
                    <td>
                        @foreach ($menuCategoryCG0003 as $ma)
                        <div id="button-{{ $ma['id'] }}" href="#" class="btn btn-outline-primary rounded iq-col-masonry-block">
                            <img src="{{ asset('menuimages/' . $ma['image']) }}" width="81px"><br>
                            <input type="checkbox" name="{{ $ma['category_code'] . '-' . $i }}[]" value="{{ $ma['id'] }}" class="check">
                            <p style="font-size: 10px">{{ $ma['name'] }}</p>
                        </div><br><br>
                        @endforeach
                    </td>
                    <td>
                        @foreach ($menuCategoryCG0004 as $ma)
                        <div id="button-{{ $ma['id'] }}" href="#" class="btn btn-outline-primary rounded iq-col-masonry-block">
                            <img src="{{ asset('menuimages/' . $ma['image']) }}" width="81px"><br>
                            <input type="checkbox" name="{{ $ma['category_code'] . '-' . $i }}[]" value="{{ $ma['id'] }}" class="check">
                            <p style="font-size: 10px">{{ $ma['name'] }} <br><br>Protein/Carb : {{ $dinnerp_c }}</p>
                        </div><br><br>
                        @endforeach
                    </td>
                </tr>
                @endif

                @php
                $currentDt = date('d-m-Y', strtotime($currentDt . ' + 1 days'));
                $day = new DateTime($currentDt);
                $day = $day->format('l');
                if ($day == 'Friday') {
                $currentDt = date('d-m-Y', strtotime($currentDt . ' + 1 days'));
                }
                $fromm = new DateTime($currentDt);
                $dayName = strtolower($fromm->format('l'));
                if($firstDayName === $dayName){
                    $week++;
                }
                if($week == 3){
                    $week = 1;
                }
                if($week == 4){
                    $week = 2;
                }
                @endphp
            @endfor
        </table>
    </div>
</div>

关键修改说明

  1. 添加标签页切换组件：用Bootstrap自带的标签页组件，制作Week1和Week2的切换按钮，默认激活Week1标签页。
  2. 拆分餐食表格到对应面板：将原来的单一表格拆分为两个，分别放入Week1和Week2的标签面板中，从结构上隔离不同周的内容。
  3. 按周过滤渲染行：在循环生成表格行时，添加@if($week == 1)和@if($week == 2)的判断，只渲染对应周的餐食行。
  4. 优化数据过滤逻辑：将周和日期的判断提前到array_filter中，减少循环内的重复条件判断，提升渲染效率。
  5. 修复重复DOM ID问题：原代码中所有餐食按钮的ID均为button，会导致DOM冲突，修改为button-{{ $ma['id'] }}保证每个按钮ID唯一。
  6. 使用独立日期变量：每个标签面板的循环使用独立的$currentDt变量，避免两个面板的日期计算互相干扰。

内容的提问来源于stack exchange，提问作者Joseph MAthew

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.05 11:17:03