I remember trying to manipulate the styles of individual rows in tables, and I was running into similar problems.
I solved it by wrapping the
<tr></tr> in a tbody, and then manipulating the tbody's class.
<tbody class="mail"><tr>
<td>Hello World</td>
<td>Kruptof</td>
<td>Today</td>
</tr></tbody>
Hope that helps.
Also, enumerating each tr tag in your javascript is odd. Why not directly reference the tag you're looking for? And of course, you're going to need to update that code to look for the mail tbody, instead of the mail tr.
Oh, and your javascript can be substituted with something stabler, quicker, and more compatible: CSS. Unless you need to do more than alter the hover colour.