呼唤远方
我下面的解决方案很大程度上与之前发布的内容一致。但是,当您想要考虑可访问性时,这样做会让您对语义和颜色对比度有更多的控制。您通常不想像您的示例那样将“黑色”与“深红色”配对。这段代码也更简洁一些。<!DOCTYPE html><html><style>td{ padding: 0.5em;}.color-bg-green{ background-color: green;}.color-bg-red{ background-color: red;}.color-bg-yellow{ background-color: yellow;}.color-bg-orange{ background-color: orange;}.color-fg-white{ color: white;}.color-fg-black{ color: black;}</style><body><table><?php$rowData = [];$rowData[] =['id' => 1, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'success', 'assigned' => 'Person A'];$rowData[] =['id' => 2, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'failure', 'assigned' => 'Person B'];$rowData[] =['id' => 3, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'success', 'assigned' => 'Person C'];$rowData[] =['id' => 4, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'pending', 'assigned' => 'Person D'];$rowData[] =['id' => 5, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'processing', 'assigned' => 'Person E'];$rowData[] =['id' => 6, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'success', 'assigned' => 'Person F'];foreach ($rowData as $data){ switch ($data['status']) { case 'success': { $rowFgColor = 'white'; $rowBgColor = 'green'; } break; case 'failure': { $rowFgColor = 'black'; $rowBgColor = 'red'; } break; case 'pending': { $rowFgColor = 'black'; $rowBgColor = 'yellow'; } break; default: case 'processing': { $rowFgColor = 'black'; $rowBgColor = 'orange'; } break; } echo "<tr class=\"color-fg-$rowFgColor color-bg-$rowBgColor\">"; foreach (['id', 'number', 'date', 'device', 'model', 'problem', 'status', 'assigned'] as $column) echo "<td>{$data[$column]}</td>"; echo "</tr>";}?></table></body></html>