PHP/HTML三级分类表格展示实现求助（附数据与测试代码）

Got it, let's get this sorted for you! The problem with your current code is that it only handles two levels of categories, doesn't add the required indentation, and dumps all subcategories into a single table cell instead of their own rows. Since your category data is nested, a recursive function is the perfect solution—it’ll handle any depth of categories (not just three) and automatically apply the right indentation.

Here’s the Complete Working Code #

First, we’ll use a recursive function to iterate through each category level, build the indented names, and generate proper table rows:

<?php
// Your database-nested category array (simplified for clarity)
$categories = [
    [
        'category_id' => 2,
        'category_name' => 'Tutorials',
        'category_link' => '#',
        'parent_id' => 0,
        'sort_order' => 1,
        'subcategories' => [
            [
                'category_id' => 3,
                'category_name' => 'Java',
                'category_link' => 'java',
                'parent_id' => 2,
                'sort_order' => 1,
                'subcategories' => [
                    [
                        'category_id' => 18,
                        'category_name' => 'Jquery Tut',
                        'category_link' => 'jquerytut',
                        'parent_id' => 3,
                        'sort_order' => 3,
                        'subcategories' => []
                    ]
                ]
            ]
        ]
    ],
    [
        'category_id' => 5,
        'category_name' => 'Frameworks',
        'category_link' => '#',
        'parent_id' => 0,
        'sort_order' => 2,
        'subcategories' => [
            [
                'category_id' => 9,
                'category_name' => 'Hibernate',
                'category_link' => 'hibernate',
                'parent_id' => 5,
                'sort_order' => 2,
                'subcategories' => []
            ]
        ]
    ],
    [
        'category_id' => 13,
        'category_name' => 'Contact',
        'category_link' => 'contact',
        'parent_id' => 0,
        'sort_order' => 4,
        'subcategories' => []
    ]
];

// Recursive function to generate indented table rows
function buildCategoryRows($categoryList, $depth = 0) {
    $html = '';
    // Generate indentation: 0 depth = no indent, 1 = "-- ", 2 = "--- ", etc.
    $indent = str_repeat('-- ', $depth);

    foreach ($categoryList as $category) {
        // Escape content to prevent XSS (always a good practice!)
        $safeName = htmlspecialchars($category['category_name']);
        $safeLink = htmlspecialchars($category['category_link']);
        $categoryId = (int)$category['category_id'];

        // Add the current category's table row
        $html .= "<tr>
            <td>{$indent}{$safeName}</td>
            <td><a href=\"{$safeLink}\">{$safeLink}</a></td>
            <td><a href=\"#more-{$categoryId}\" class=\"more-link\">more</a></td>
        </tr>";

        // If there are subcategories, recursively process them with increased depth
        if (!empty($category['subcategories'])) {
            $html .= buildCategoryRows($category['subcategories'], $depth + 1);
        }
    }

    return $html;
}

// Build the full table
$categoryTable = "
<table style='border-collapse: collapse; width: 100%;'>
    <thead>
        <tr>
            <th style='border: 1px solid #ccc; padding: 8px; text-align: left;'>CategoryName</th>
            <th style='border: 1px solid #ccc; padding: 8px; text-align: left;'>Link</th>
            <th style='border: 1px solid #ccc; padding: 8px; text-align: left;'>more</th>
        </tr>
    </thead>
    <tbody>
        " . buildCategoryRows($categories) . "
    </tbody>
</table>
";

// Output the table
echo $categoryTable;
?>

Key Improvements Over Your Original Code #

• Recursive Handling: The buildCategoryRows function automatically digs into every level of subcategories, so it works for 2, 3, or even 10 levels of categories.
• Proper Indentation: Using str_repeat('-- ', $depth) creates the exact indentation format you requested:
  • Level 0 (main categories): No prefix
  • Level 1 (subcategories): --
  • Level 2 (sub-subcategories): ---
• Semantic Table Structure: We added <thead> and <tbody> for better accessibility and structure, plus inline CSS (you can replace this with your own stylesheet).
• Security: htmlspecialchars() ensures user-generated category names/links don’t introduce XSS vulnerabilities.
• Separate Rows: Each category (and subcategory) gets its own table row, matching your example output.

What Your Original Code Was Missing #

Your initial code only looped through top-level categories and their direct subcategories, but didn’t:

1. Create separate rows for subcategories
2. Add any indentation
3. Handle the third level of sub-subcategories
4. Escape content for safety

This solution fixes all those issues and gives you a flexible, maintainable way to display nested categories.

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