如何在Pug中根据条件修改表格pending列的颜色

看起来你遇到的问题主要有两个核心点：一是在Pug的JavaScript逻辑里错误使用了HTML实体，二是只给第一个Pending列加了颜色判断逻辑，其他列没覆盖到。咱们一步步来修复：

问题分析 #

1. 错误的比较运算符：在Pug的-if()代码块里，你用了>（这是HTML的大于号实体），但这里是原生JavaScript逻辑，应该直接用JS的>运算符——Pug会正确解析这个符号，完全不需要转义。
2. 未覆盖所有Pending列：你只给pending_boxes列加了颜色判断，其他如pending_panel_boxes、pending_hardware_boxes等列都没应用同样的逻辑，自然不会变色。

修正后的Pug代码 #

mixin dispatch-summary(dispatched)
  - var count = 0
  table
    caption.align-center.font-bold.heading DISPATCHED RECORDS
    tr
      th.align-center.font-bold S.NO
      th.align-center.font-bold.diswidth Dispatch Id
      th.align-center.font-bold.prjwidth Projects
      th.align-center.font-bold.rescol Total Boxes
      th.align-center.font-bold.rescol Total Pending Boxes
      th.align-center.font-bold.rescol Total Panel Boxes
      th.align-center.font-bold.rescol Total Pending Panel Boxes
      th.align-center.font-bold.rescol Total Hardware Boxes
      th.align-center.font-bold.rescol Total Pending Hardware Boxes
      th.align-center.font-bold.rescol Total Parts 
      th.align-center.font-bold.rescol Total Pending Parts
      th.align-center.font-bold.rescol Total Hardware
      th.align-center.font-bold.rescol Total Pending Hardware

    each task in dispatched
      -var dispatch_id = task.dispatch_id
      -var project = task.project
      -var total_boxes = task.total_boxes
      -var total_dispatched_boxes = task.total_dispatched_boxes
      -var pending_boxes = total_boxes-total_dispatched_boxes
      -var total_panel_boxes = task.total_panel_boxes
      -var total_dispatched_panel_boxes = task.total_dispatched_panel_boxes
      -var pending_panel_boxes = total_panel_boxes-total_dispatched_panel_boxes
      -var total_hardware_boxes = task.total_hardware_boxes
      -var total_dispatched_hardware_boxes = task.total_dispatched_hardware_boxes
      -var pending_hardware_boxes=total_hardware_boxes-total_dispatched_hardware_boxes
      -var total_parts = task.total_parts
      -var total_dispatched_parts = task.total_dispatched_parts
      -var pending_parts = total_parts-total_dispatched_parts
      -var total_hardware = task.total_hardware
      -var total_dispatched_hardware = task.total_dispatched_hardware
      -var pending_hardware = total_hardware-total_dispatched_hardware

      tr(bgcolor='#c3d9f0')
        td.font-bold=++count
        td.align-left= dispatch_id
        td.align-left= project
        td.align-left= total_boxes
        // 修正第一个Pending列的判断符号
        -if(pending_boxes > 0)
          td.align-left.text-color= pending_boxes
        -else
          td.align-left= pending_boxes
        td.align-left= total_panel_boxes
        // 给Pending Panel Boxes列添加判断逻辑
        -if(pending_panel_boxes > 0)
          td.align-left.text-color= pending_panel_boxes
        -else
          td.align-left= pending_panel_boxes
        td.align-left= total_hardware_boxes
        // 给Pending Hardware Boxes列添加判断逻辑
        -if(pending_hardware_boxes > 0)
          td.align-left.text-color= pending_hardware_boxes
        -else
          td.align-left= pending_hardware_boxes
        td.align-left= total_parts
        // 给Pending Parts列添加判断逻辑
        -if(pending_parts > 0)
          td.align-left.text-color= pending_parts
        -else
          td.align-left= pending_parts
        td.align-left= total_hardware
        // 给Pending Hardware列添加判断逻辑
        -if(pending_hardware > 0)
          td.align-left.text-color= pending_hardware
        -else
          td.align-left= pending_hardware

额外验证点 #

确保你的样式表中正确定义了.text-color类，比如你想要背景变色的话：

.text-color {
  background-color: #ffeeee; /* 或者你需要的文字颜色 color: #dc3545; */
}

这样修改后，所有Pending列的值大于0时就会应用指定的样式，值为0时保持默认背景啦。

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