PHP实现表格按tagid分组交替着色问题求助

需求：表格行按tagid分组着色，同一tagid的所有行使用同一种颜色，不同tagid分组交替使用table-danger（红色）和table-warning（黄色）循环。

当前问题：现有代码仅每个tagid分组的首行显示红色，分组内后续行显示黄色，不符合同组同色的要求。

现有代码 #

$groupid = null;
$output = '<table class="table">';

foreach($data as $key => $var)
{
  echo $var['tagid'];

  if($var['tagid'] != $groupid)
  {
    $output .= '<tr class=table-danger>';

    foreach($var as $k => $v)
    {
      $output .= '<td style="5%">' . $v . '</td>';
    }
  }
  else
  {
    $output .= '<tr class=table-warning>';

    foreach($var as $k => $v)
    {
      $output .= '<td style="5%">' . $v . '</td>';
    }
  }

  $groupid = $var['tagid'];
}

示例数组 #

array(42) 
{ [0]=> array(16) { ["tagid"]=> string(38) "S_04CF22A8-31B4-4581-BC57-A3BD288D25C7" ["tagtime"]=> string(19) "2022-10-19 20:18:18" ["lat"]=> string(11) "52.10000000" ["long"]=> string(11) "-3.20000000" ["moonRise"]=> string(9) "Not Today" ["moonSet"]=> string(19) "2022-10-19 15:41:54" ["moonPhase"]=> float(0.814284) ["windDirection"]=> string(7) "100°" ["windSpeed"]=> string(7) "13.1mph" ["temp"]=> string(10) "11.85°C" ["weatherCondition"]=> string(6) "Clouds" ["airPressure"]=> float(1011) ["precipitation"]=> string(3) "0mm" } 
[1]=> array(16) { ["tagid"]=> string(38) "S_04CF22A8-31B4-4581-BC57-A3BD288D25C7" ["tagtime"]=> string(19) "2022-10-19 20:18:42" ["lat"]=> string(11) "52.10000000" ["long"]=> string(11) "-3.20000000" ["moonRise"]=> string(9) "Not Today" ["moonSet"]=> string(19) "2022-10-19 15:41:54" ["moonPhase"]=> float(0.814292) ["windDirection"]=> string(7) "100°" ["windSpeed"]=> string(7) "13.1mph" ["temp"]=> string(10) "11.85°C" ["weatherCondition"]=> string(6) "Clouds" ["airPressure"]=> float(1011) ["precipitation"]=> string(3) "0mm" } 
[2]=> array(16) { ["tagid"]=> string(38) "S_04CF22A8-31B4-4581-BC57-A3BD288D25C7" ["tagtime"]=> string(19) "2022-10-19 20:18:51" ["lat"]=> string(11) "52.10000000" ["long"]=> string(11) "-3.20000000" ["moonRise"]=> string(9) "Not Today" ["moonSet"]=> string(19) "2022-10-19 15:41:54" ["moonPhase"]=> float(0.814295) ["windDirection"]=> string(7) "100°" ["windSpeed"]=> string(7) "13.1mph" ["temp"]=> string(10) "11.85°C" ["weatherCondition"]=> string(6) "Clouds" ["airPressure"]=> float(1011) ["precipitation"]=> string(3) "0mm" } 
[3]=> array(16) { ["tagid"]=> string(38) "S_0DB2D804-A2F7-4CDA-B744-C7AD9926E999" ["tagtime"]=> string(19) "2022-10-19 19:47:18" ["lat"]=> string(11) "52.10000000" ["long"]=> string(11) "-3.20000000" ["moonRise"]=> string(9) "Not Today" ["moonSet"]=> string(19) "2022-10-19 15:41:54" ["moonPhase"]=> float(0.81363) ["windDirection"]=> string(7) "100°" ["windSpeed"]=> string(7) "13.1mph" ["temp"]=> string(10) "11.85°C" ["weatherCondition"]=> string(6) "Clouds" ["airPressure"]=> float(1011) ["precipitation"]=> string(3) "0mm" } 
[4]=> array(16) { ["tagid"]=> string(38) "S_0DB2D804-A2F7-4CDA-B744-C7AD9926E999" ["tagtime"]=> string(19) "2022-10-19 20:07:46" ["lat"]=> string(11) "52.10000000" ["long"]=> string(11) "-3.20000000" ["moonRise"]=> string(9) "Not Today" ["moonSet"]=> string(19) "2022-10-19 15:41:54" ["moonPhase"]=> float(0.814062) ["windDirection"]=> string(7) "100°" ["windSpeed"]=> string(7) "13.1mph" ["temp"]=> string(10) "11.85°C" ["weatherCondition"]=> string(6) "Clouds" ["airPressure"]=> float(1011) ["precipitation"]=> string(3) "0mm" } 
[5]=> array(16) { ["tagid"]=> string(38) "S_0DB2D804-A2F7-4CDA-B744-C7AD9926E999" ["tagtime"]=> string(19) "2022-10-19 20:10:55" ["lat"]=> string(11) "52.10000000" ["long"]=> string(11) "-3.20000000" ["moonRise"]=> string(9) "Not Today" ["moonSet"]=> string(19) "2022-10-19 15:41:54" ["moonPhase"]=> float(0.814128) ["windDirection"]=> string(7) "100°" ["windSpeed"]=> string(7) "13.1mph" ["temp"]=> string(10) "11.85°C" ["weatherCondition"]=> string(6) "Clouds" ["airPressure"]=> float(1011) ["precipitation"]=> string(3) "0mm" } 
[6]=> array(16) { ["tagid"]=> string(38) "S_158E8F79-77F0-4485-B0AE-B75635F4EAA2" ["tagtime"]=> string(19) "2022-10-20 14:57:08" ["lat"]=> string(11) "50.45082112" ["long"]=> string(11) "-4.06133970" ["moonRise"]=> string(19) "2022-10-20 00:33:06" ["moonSet"]=> string(19) "2022-10-20 15:56:11" ["moonPhase"]=> float(0.838046) ["windDirection"]=> string(7) "151°" ["windSpeed"]=> string(4) "2mph" ["temp"]=> string(10) "14.85°C" ["weatherCondition"]=> string(6) "Clouds" ["airPressure"]=> float(1011) ["precipitation"]=> string(3) "0mm" }

修正后的代码 #

// 存储每个tagid对应的颜色
$tagColors = [];
// 交替颜色列表
$colorOptions = ['table-danger', 'table-warning'];
// 当前使用的颜色索引
$currentColorIndex = 0;
$output = '<table class="table">';

foreach($data as $key => $var) {
    $tagId = $var['tagid'];
    
    // 如果当前tagid还未分配颜色，分配当前颜色并切换下一个
    if (!isset($tagColors[$tagId])) {
        $tagColors[$tagId] = $colorOptions[$currentColorIndex];
        // 切换索引，循环使用颜色
        $currentColorIndex = ($currentColorIndex + 1) % count($colorOptions);
    }
    
    // 使用该tagid对应的颜色创建行
    $output .= '<tr class="' . $tagColors[$tagId] . '">';
    foreach($var as $k => $v) {
        $output .= '<td style="width:5%">' . $v . '</td>';
    }
    $output .= '</tr>';
}

$output .= '</table>';

关键逻辑说明 #

• $tagColors数组：记录每个tagid对应的固定颜色，确保同一tagid的所有行颜色一致
• $colorOptions：定义交替使用的颜色列表，可扩展更多颜色
• $currentColorIndex：控制颜色切换，通过取模运算实现循环交替
• 补充了原代码中遗漏的</tr>和</table>闭合标签，修复HTML结构错误

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