Hey there! Let's fix this table layout to match your exact requirements. First, let's recap the rules to make sure we're on the same page:

• If the current color matches the previous non-Yellow/Green color, stack it vertically in the same column group
• If the current color is a different non-Yellow/Green color, start a new column group
• Yellow and Green always stack vertically in the current column group, no matter what came before

Looking at your existing code, the core issue is in how we're grouping the colors and generating the table rows/columns. Let's adjust the logic to get the desired output:

Modified Controller Code #

function transaction(){ 
    $data = $this->dashboards->queryTransaction(); 
    $columnGroups = array(); 
    $lastNonSpecialColor = ''; // Track last non-Yellow/Green color
    $currentGroupIndex = 0;
    $columnGroups[$currentGroupIndex] = array();

    foreach ($data as $entry) {
        $currentColor = $entry['logs'];
        // Assign background class based on color
        switch ($currentColor) { 
            case "red": 
                $badgeClass = "bg-danger"; 
                break; 
            case "blue": 
                $badgeClass = "bg-primary"; 
                break; 
            case "green": 
                $badgeClass = "bg-success"; 
                break; 
            case "yellow": 
                $badgeClass = "bg-warning"; 
                break; 
            default: 
                $badgeClass = "bg-primary"; 
                break; 
        }

        // Determine if we need to start a new column group
        $needsNewGroup = false;
        if ($currentColor !== "yellow" && $currentColor !== "green") {
            if ($lastNonSpecialColor !== '' && $lastNonSpecialColor !== $currentColor) {
                $needsNewGroup = true;
            }
            // Update last non-special color only for non-Yellow/Green
            $lastNonSpecialColor = $currentColor;
        }

        if ($needsNewGroup) {
            $currentGroupIndex++;
            $columnGroups[$currentGroupIndex] = array();
        }

        // Add the badge to the current column group
        $columnGroups[$currentGroupIndex][] = $badgeClass;
    }

    // Calculate the maximum number of rows needed (tallest column group)
    $maxRows = 0;
    foreach ($columnGroups as $group) {
        if (count($group) > $maxRows) {
            $maxRows = count($group);
        }
    }

    // Build the table HTML
    $output = '<table id="displayLogs" class="table-bordered" >';
    for ($row = 0; $row < $maxRows; $row++) {
        $output .= '<tr>';
        foreach ($columnGroups as $group) {
            if (isset($group[$row])) {
                $output .= '<td><span data-toggle="tooltip" class="badge ' . $group[$row] . '" style="font-size: 23px; margin: 0px; border-radius: 50px;">&#664;</span></td>';
            } else {
                // Empty cell for columns that don't have an entry in this row
                $output .= '<td></td>';
            }
        }
        $output .= '</tr>';
    }
    $output .= '</table>'; // Don't forget to close the table tag!

    echo json_encode($output); 
}

Key Changes Explained #

1. Better Tracking of Column Groups:

   • We use $columnGroups to store each vertical column's badges. Each index in this array is a separate column group.
   • $lastNonSpecialColor only tracks Red/Blue, so Yellow/Green don't trigger new groups.

2. Accurate New Group Logic:

   • We only create a new column group if the current color is Red/Blue and it's different from the last tracked Red/Blue color.
   • Yellow/Green always get added to the current column group, no exceptions.

3. Proper Table Construction:

   • We first find the tallest column group to know how many rows we need.
   • For each row, we loop through all column groups and add a badge if that group has an entry for the current row, otherwise an empty cell. This ensures vertical stacking works correctly.
   • Added the missing </table> tag to fix HTML structure.

This should produce exactly the layout you're aiming for: same Red/Blue stack vertically, different Red/Blue start new columns, and Yellow/Green always stack in the current column.

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