alternate colors to rows in asp.net mvc razor loop

alternate colors to rows in asp.net mvc razor loop

HTML

<table id="tblCssClass" width="100%">
    <tr class="Header">
        <th>Name</th>
        <th>Address</th>
        <th>Phone</th>
        <th>Details</th>
    </tr>
    <tr>
        <td><span>Name i</span></td>
        <td><span>Address  i</span></td>
        <td><span>Phone i</span></td>
        <td><span>Details i</span></td>
    </tr>
    <tr>
        <td><span>Name 2</span></td>
        <td><span>Address  i</span></td>
        <td><span>Phone i</span></td>
        <td><span>Details i</span></td>
    </tr>
    <tr>
        <td><span>Name i</span></td>
        <td><span>Address  i</span></td>
        <td><span>Phone i</span></td>
        <td><span>Details i</span></td>
    </tr>
    <tr>
        <td><span>Name i</span></td>
        <td><span>Address  i</span></td>
        <td><span>Phone i</span></td>
        <td><span>Details i</span></td>
    </tr>
</table>

CSS

tr.d0 td {
        background-color: #CC9999;
        color: black;
    }

    tr.d1 td {
        background-color: #9999CC;
        color: black;
    }

JavaScript

$(document).ready(function () {
    $('table tr:not(.Header):even').addClass('d0'); 
    
    $('table tr:not(.Header):odd').addClass("d1"); 
});