How to use the modulo operator in pug/jade?

Question

I am new here and a new developer, so please don't judge me. My question is, I want to build a table with pug, and very second row should be in different style. This is what I have done:

table.table.table-hover
    thead
        tr
            th(scope='col') Account
            th(scope='col') Vorname
            th(scope='col') Nachname
            th(scope='col') Mail
            th(scope='col') Löschen
    tbody
        each finding, index in findings
            if  (index% 2)  === 0
                tr.table-light
            else
                tr
            endif
            td #{finding.account}
            td #{finding.firstName}
            td #{finding.lastName}

            if index === 0
                input(type = 'hidden', name= 'mail', value=finding.mail)
            endif
                td #{finding.mail}
                td
                    input.form-check-input(name='accounts[]', value=finding.account, type='checkbox', checked='')

But the rows have the same style... I think I'm using the modulo operator wrong, but on the internet that was the only way I found it.

Answer 1

You can do:

tr(class=index % 2 ? 'table-light' : null)

Alternatively, you can use pure CSS as @Capricorn suggests:

.table-striped tr:nth-child(even) {
    background-color: #f2f2f2
}

Then in the pug, just add .table-striped to your table.