Блог

Главная - Вопросы по программированию - Как раскрасить ячейку таблицы на основе содержимого

Как раскрасить ячейку таблицы на основе содержимого

#php #html #colors #html-table

#php #HTML #Цвет #html-таблица

Вопрос:

Я использую следующий php-код для раскрашивания разных ячеек в моей HTML-таблице, но мне было интересно, есть ли лучший способ сделать это.

 <?php if($crew['status'] == 'OUT') { ?>
  <td style='text-align:center;font-size:80%;color:red'   ><?php echo $crew['status'] ?></td>
<?php } else if($crew['status'] == 'OPEN') { ?>
  <td style='text-align:center;font-size:80%;color:blue'  ><?php echo $crew['status'] ?></td>
<?php } else if($crew['status'] == 'CONFIRMED') { ?>   
  <td style='text-align:center;font-size:80%;color:green' ><?php echo $crew['status'] ?></td>
<?php } else if($crew['status'] == 'WAITLIST') { ?>   
  <td style='text-align:center;font-size:80%;color:purple'><?php echo $crew['status'] ?></td>
<?php } else  { ?>   
  <td style='text-align:center;font-size:80%;color:orange'>TIMESPAN</td>
<?php } ?>

Ответ №1:

Много… Вам следует избегать использования большого количества встроенных CSS.

Вы могли бы сделать что-то вроде следующего:

 <style>
#yourtable tr td {
  text-align:center;
  font-size:80%;
}
</style>

<?php 
$colors = [
  'OUT' => 'red',
  'OPEN' => 'blue',
  'CONFIRMED' => 'green',
  'WAITLIST' => 'purple'
];
?>

<?php if (array_key_exists($crew['status'], $colors)): ?>
<td style="color:<?= $colors[$crew['status']]?>"><?= $crew['status'] ?></td>
<?php else: ?>
<td style="color:orange">TIMESPAN</td>
<?php endif ?>

Комментарии:

1. Мне это нравится, но почему строка $crew[‘status’] = ‘OUT’; ? Я не думаю, что это необходимо

Ответ №2:

Вот как я бы это сделал:

   <td class="status-<?php echo $crew['status']; ?>><?php echo $crew['status'] ?></td>

  ...

  <style type="text/css">
    td.status {
      text-align: center;
      font-size: 80%;
      color: orange;
    }
    td.status-OUT { color: red; }
    td.status-OPEN { color: blue; }
    td.status-CONFIRMED { color: green; }
    td.status-WAITLIST { color: purple; }
  </style>
Метки: