Question

我有下面的代码行，我想在它们的值大于零时更改所有待处理列的颜色，如果它们的值等于零，则背景中没有变化。下面是我的代码我试图使用它，如果条件和改变背景，但它不适合我。

代码：

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
            -if(pending_boxes > 0)
              td.align-left.text-color= pending_boxes
            -else
              td.align-left= pending_boxes
            td.align-left= total_panel_boxes
            td.align-left= pending_panel_boxes
            td.align-left= total_hardware_boxes
            td.align-left= pending_hardware_boxes
            td.align-left= total_parts
            td.align-left= pending_parts
            td.align-left= total_hardware
            td.align-left= pending_hardware

以下是我的JSON数据：

{ dispatched: 
   [ { dispatch_id: 6433,
       dispatched: true,
       project: '001940_N',
       current_panel_boxes: 0,
       current_hardware_boxes: 1,
       total_parts: 750,
       total_dispatched_parts: 0,
       total_hardware: 7805,
       total_dispatched_hardware: 36,
       total_boxes: 89,
       total_dispatched_boxes: 1,
       total_panel_boxes: 66,
       total_hardware_boxes: 23,
       total_dispatched_hardware_boxes: 1,
       total_dispatched_panel_boxes: 0 },
     { dispatch_id: 6435,
       dispatched: true,
       project: '002051_N,002052_D,002054_N',
       current_panel_boxes: 2,
       current_hardware_boxes: 1,
       total_parts: 2,
       total_dispatched_parts: 2,
       total_hardware: 1,
       total_dispatched_hardware: 1,
       total_boxes: 3,
       total_dispatched_boxes: 3,
       total_panel_boxes: 2,
       total_hardware_boxes: 1,
       total_dispatched_hardware_boxes: 1,
       total_dispatched_panel_boxes: 2 } ],
  pendingDispatch: [] }

Answer 1

问题似乎与编译的HTML元素有关。

<tr bgcolor="#c3d9f0">
  ...
  <div class="text-color">
    <td class="align-left">1</td>
  </div>
  ....
</tr>

上述结构无效，因为我们无法<div>作为<tr>的直接子女

现在，作为更改background-color的具体问题的解决方案，您可以使用以下代码行，

-if(pending_boxes > 0)
  td.align-left.text-color= pending_boxes
-else
  td.align-left= pending_boxes

当条件成立时，将编译为，

<td class="align-left text-color">1</td>

希望这有帮助。

如何根据哈巴狗的条件更改列的颜色

1 个答案: