如何在HTML中展示同值PHP数据行并合并为子分类？

实现思路 #

要把同名分类（比如"pampanga"）的套餐合并展示，核心是先将数据库数据按分类分组，再按分类层级输出内容，具体分两步：

1. 从数据库获取数据时按分类排序，方便后续分组处理
2. 在PHP中把数据整理成「分类名 => 对应套餐列表」的结构，再循环输出分类和套餐

修改后的完整代码 #

<section class="page-section bg-dark" id="home">
    <div class="container">
        <h2 class="text-center">Tour Packages</h2>
    <div class="d-flex w-100 justify-content-center">
        <hr class="border-warning" style="border:3px solid" width="15%">
    </div>
    <div class="w-100">
        <?php
        // 1. 查询数据时按分类排序，确保同分类的套餐连续
        $packages = $conn->query("SELECT * FROM `packages` ORDER BY category, rand() ");
        
        // 2. 初始化分组数组，存储「分类名 => 套餐列表」
        $grouped_packages = [];
        while($row = $packages->fetch_assoc() ):
            $cover='';
            if(is_dir(base_app.'uploads/package_'.$row['id'])){
                $img = scandir(base_app.'uploads/package_'.$row['id']);
                $k = array_search('.',$img);
                if($k !== false)
                    unset($img[$k]);
                $k = array_search('..',$img);
                if($k !== false)
                    unset($img[$k]);
                $cover = isset($img[2]) ? 'uploads/package_'.$row['id'].'/'.$img[2] : "";
            }
            $row['description'] = strip_tags(stripslashes(html_entity_decode($row['description'])));
            $row['cover'] = $cover; // 把封面路径存入行数据
            
            // 将当前套餐按分类分组
            $category = $row['category']; // 假设分类字段名为category，可根据实际表结构修改
            if(!isset($grouped_packages[$category])){
                $grouped_packages[$category] = [];
            }
            $grouped_packages[$category][] = $row;
        endwhile;
        
        // 3. 循环输出每个分类及其下的套餐
        foreach($grouped_packages as $category_name => $package_list):
        ?>
        <div class="mb-4">
            <!-- 分类标题（仅显示一次） -->
            <h3 class="text-warning mb-3"><?php echo $category_name ?></h3>
            <!-- 分类下的套餐卡片容器 -->
            <div class="d-flex flex-wrap gap-3">
                <?php foreach($package_list as $row): ?>
                <div class="card flex-shrink-0" style="width: 280px;">
                    <img class="card-img-top" src="<?php echo validate_image($row['cover']) ?>" alt="<?php echo $row['title'] ?>" height="200rem" style="object-fit:cover">
                    <div class="card-body">
                    <h5 class="card-title truncate-1"><?php echo $row['title'] ?></h5>
                    <p class="card-text truncate"><?php echo $row['description'] ?></p>
                    <div class="w-100 d-flex justify-content-end">
                        <a href="./?page=packages&id=<?php echo md5($row['id']) ?>" class="btn btn-sm btn-flat btn-warning">View Package <i class="fa fa-arrow-right"></i></a>
                    </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <div class="d-flex w-100 justify-content-end">
        <a href="./?page=packages" class="btn btn-flat btn-warning mr-4">Explore Package <i class="fa fa-arrow-right"></i></a>
    </div>
    </div>
</section>

关键修改说明 #

• SQL查询调整：添加ORDER BY category，让同分类的套餐数据连续，简化分组逻辑
• 数据分组逻辑：用$grouped_packages数组将套餐按分类名归类，确保每个分类只存储一次，对应所属的所有套餐
• 输出结构调整：外层循环输出分类标题，内层循环输出该分类下的所有套餐卡片，实现「分类-套餐」的层级展示
• 样式适配：给套餐卡片添加固定宽度和弹性换行布局，避免排版混乱，可根据需求调整宽度和间距

注意：代码中假设分类字段名为category，请根据你的数据库表结构修改为实际字段名（比如如果字段叫location就改成$row['location']）

内容的提问来源于stack exchange，提问作者James David