PHP生成表格实现同ID行统一着色的技术问询

Got it, let's tackle this problem. The goal is to give rows with the same Id the same background color (and distinct colors for different ID groups), right? Here's a practical approach combining small PHP adjustments and JavaScript:

Step 1: Fix Invalid HTML (Duplicate IDs) #

First, your current code uses the same Id for multiple <tr> elements, which violates HTML rules (IDs must be unique). Let's adjust the PHP to generate a unique row ID while keeping a data-id attribute to track the shared employee ID:

<table class="table table-responsive" id="employee_table3">
<thead>
<tr>
<th>Data</th>
<th>Valência</th>
<th>Descrição</th>
<th>Colaborador</th>
<th>Estado</th>
<th>Prestador de Serviços</th>
<th>Tratamento</th>
<th>Data Tratamento</th>
<th>Técnico</th>
<th>Ação</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody>
<?php do{ 
    // Generate unique row ID, retain data-id for shared employee ID
    $uniqueRowId = "row-" . $produto3["Id"] . "-" . uniqid();
?>
<tr id="<?php echo $uniqueRowId; ?>" data-id="<?php echo $produto3["Id"]; ?>">
<td><?php echo $produto3["DataRegisto"]; ?></td>
<td><?php echo $produto3["Destino"]; ?></td>
<td><?php echo $produto3["Descricao"]; ?></td>
<td><?php echo $produto3["nome"]; ?></td>
<td><?php echo $produto3["Estado"]; ?></td>
<td><?php echo $produto3["Prestador"]; ?></td>
<td><?php echo $produto3["Tratamento"]; ?></td>
<td><?php echo $produto3["DataTermino"]; ?></td>
<td><?php echo $produto3["Colaborador1"]; ?></td>
<td><button type="button" name="edit3" data-id="<?php echo $produto3["Id"]; ?>" data-target="#add_data_Modal3" class="btn btn-warning btn-sm edit_data3" ><span class="glyphicon glyphicon-pencil"></span></button></td>
<td><button class="btn btn-danger btn-sm remove3"><span class="glyphicon glyphicon-trash"></span></button></td>
</tr>
<?php } while($produto3 = $result3->fetch_assoc()); ?>
</tbody>
</table>

Step 2: Add JavaScript to Apply Group Colors #

We'll use jQuery (since your code uses Bootstrap, which typically includes jQuery) to assign consistent colors to rows with the same data-id. We'll use soft, readable background colors to avoid clashing with table content:

$(document).ready(function() {
    // Predefined list of muted background colors (add more if you have many ID groups)
    const colors = [
        "#f0f8ff", "#f5f5dc", "#e6e6fa", "#fafad2",
        "#ffe4e1", "#e0ffff", "#f0fff0", "#fff5ee"
    ];
    // Object to map each data-id to a specific color
    const idColorMap = {};
    let colorIndex = 0;

    // Loop through all rows in the table body
    $("#employee_table3 tbody tr").each(function() {
        const rowId = $(this).data("id");
        
        // Assign a color if this ID hasn't been mapped yet
        if (!idColorMap[rowId]) {
            idColorMap[rowId] = colors[colorIndex % colors.length];
            colorIndex++;
        }

        // Apply the background color to the row
        $(this).css("background-color", idColorMap[rowId]);
    });
});

How This Works: #

• We create a mapping between each shared data-id and a color from our predefined list.
• For each row, if its ID hasn't been assigned a color yet, we pick the next color in the list (looping back to the start if we run out).
• We then apply that color to the row's background, ensuring all rows with the same ID get the same shade.

Quick Tweaks (Optional): #

• If you prefer random soft colors instead of predefined ones, replace the color assignment with a function like:

  idColorMap[rowId] = `rgba(${Math.floor(Math.random()*50)+200}, ${Math.floor(Math.random()*50)+200}, ${Math.floor(Math.random()*50)+200}, 0.2)`;
  

• Adjust the color list to match your site's design system for consistency.

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