How to make a zebra-striped table with Jade

This is a very simple tutorial on how to make a zebra-striped table, such as the one below, using the Jade template engine.

The jade template looks like this:

  table#cameras
    thead
      tr.head
        th Camera
        th Description
        th Type
        th Device
        th Channel
        th Format
        th Palette
        th Width
        th Height
        th Fps
    tbody
      - var i = -1
      each val, key in cameras
        - ++i
        tr(class=(i % 2 == 0) ? 'odd' : 'even')
          td #{key}
          td #{val.descr}
          td #{val.type}
          td #{val.device}
          td #{val.channel}
          td #{val.format}
          td #{val.palette}
          td #{val.width}
          td #{val.height}
          td #{val.fps}

Note the lines prefixed with a hyphen (-), the first one creates a var and the second increments this var inside the each loop.

In the loop it cycles between 'odd' and 'even' tr class, depending on the i var value.

The stylus template looks like this:

table#cameras tr.odd
  background-color: #444

table#cameras tr.even
  background-color: #888