根据值更改表行颜色 [英] Change table row color based on value

问题描述

我有一个看起来像这样的表：

I have a table that looks something like this:

ID     |     photo      |   ident     | status
------------------------------------------------
80     |    img/photo1  |   ACH3882   |   V
81     |    img/photo2  |   SHD8837   |   V
82     |    img/photo3  |   SFF4837   |   X
83     |    img/photo4  |   DLL3266   |   V

是否可以根据值更改行的背景颜色？因此，如果状态单元格的值为V，则变黄色，如果X变绿色？

Is it possible to change the rows background color, depending on the value? So if status cell value is V, make yellow, and if X make green?

这是我的表格，也是我尝试过的内容：

This is my table, and what I have tried:

<table class="blueTable" border="2" style= "background-color: #f9f9f9; color: #000000; margin: 0 auto;" >
  <thead style= "background-color: #FFFFFF">
    <tr>
      <th>Photo</th>
      <th>Ident</th>
      <th>Status</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
    <?php
     if ($result = $link->query($query)) {
          $num_rows = 0;
          while ($row = $result->fetch_assoc()) {
              $num_rows++;
                 if($row['status'] == 'V') {
                      $style = 'style="background-color:#00FF00;';
                  }
                  
                  if($row['status'] == 'X') {
                      $style = 'style="background-color:#FF00FF;';
                  }
              echo
              "<tr>
              <td>{$row['photo']}</td>
              <td>{$row['ident']}</td>
              <td>{$row['status']}</td>
              <td><a href='delete.php?id={$row['id']};'>Delete</a></td>
              </tr>";
             
          }
          /*freeresultset*/
          $result->free();
      }
    ?>
  </tbody>
</table>

但是背景颜色不会改变。有任何建议吗？

But somehow the background color does not change. Any suggestions?

推荐答案

您可以将状态var用作类，并为CSS中的类添加颜色，像这样

You can use your status var as a class and add the colors for the classes in css like this

.color-v {
  background-color: blue;
}

.color-x {
  background-color: green;
}

<table class="blueTable" border="2" style= "background-color: #f9f9f9; color: #000000; margin: 0 auto;" >
  <thead style= "background-color: #FFFFFF">
    <tr>
      <th>Photo</th>
      <th>Ident</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <?php
     if ($result = $link->query($query)) {
          $num_rows = 0;
          while ($row = $result->fetch_assoc()) {
              $num_rows++;
              echo
              "<tr class='color-{$row['status']}'>
              <td>{$row['photo']}</td>
              <td>{$row['ident']}</td>
              <td>{$row['status']}</td>
              </tr>";
             
          }
          /*freeresultset*/
          $result->free();
      }
    ?>
  </tbody>
</table>

这篇关于根据值更改表行颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！