时间戳

首页 > 解决方案 > 根据数据库中的值制作表格行背景颜色

php - 根据数据库中的值制作表格行背景颜色

问题描述

所以我的表是这样的：

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

现在，只有status列被着色，但我希望整行都有颜色，基于单元格中的值。但我不知道该怎么做。

这是我的桌子，也是我目前使用的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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++;
              echo
              "<tr>
              <td>{$row['photo']}</td>
              <td>{$row['ident']}</td>
              <td class='statusclass'>{$row['status']}</td>
              <td><a href='delete.php?id={$row['id']};'>Delete</a></td>
              </tr>";
             
          }
          /*freeresultset*/
          $result->free();
      }
    ?>
  </tbody>
</table>

这是添加颜色的脚本：

<script>
    $( document ).ready(function() {
    $(".statusclass").each(function(){
      if($(this).text() == "V"){
        $(this).css("background-color", "#FFEE58");
      }else if($(this).text() == "X"){
        $(this).css("background-color", "#66BB6A");
      }
    })
});
</script>

标签： phphtmlcss

解决方案

所以你说你希望父元素被着色，所以你可以使用它。只需插入.parent()行中。

<script>
    $( document ).ready(function() {
      $(".statusclass").each(function(){
        if($(this).text() == "V"){
          $(this).parent().css("background-color", "#FFEE58");
        }else if($(this).text() == "X"){
          $(this).parent().css("background-color", "#66BB6A");
        }
      })
    });
</script>

推荐阅读