Auto add middle style in table rows

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
    margin-top: 90px;
}
table,tr {
    border: 1px dotted black;
}
table {
    min-width: 600px;
}
td,tr {
    border-top: 1px dotted black;
    padding: 9px;
}
th {
    background-color: #cfaf2a;
}
tr.middle {
    background-color: #efe4b8;
}
tr:hover {
    background-color: #fbd88e;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    /*
        Aqui está o código.
        <[email protected]>
    */
    $(document).ready(function() {
        var i = 0;
        $("#tabela tr").each(function() {
            if(i % 2) { // impar
                $(this).removeClass("middle");
            } else { // par
                $(this).addClass("middle");
            }
            i++;
        });
    });
</script>
</head>
<body>
<table align="center" id="tabela">
<tr>
<th>Test 1</th>
<th>Test 2</th>
<th>Test A</th>
</tr>
<tr>
<td>Test 3</td>
<td>Test 4</td>
<td>Test A</td>
</tr>
<tr>
<td>Test 3</td>
<td>Test 4</td>
<td>Test A</td>
</tr>
<tr>
<td>Test 3</td>
<td>Test 4</td>
<td>Test A</td>
</tr>
<tr>
<td>Test 5</td>
<td>Test 6</td>
<td>Test A</td>
</tr>
<tr>
<td>Test 7</td>
<td>Test 8</td>
<td>Test A</td>
</tr>
</table>
</body>
</html>