鼠标覆盖行高亮显示 奇偶行背景颜色不同 css+jquery Table

<table class="tbl">
<tr>
<th>Name</th>
<th>DisplayName</th>
<th>Description</th>
<th>Creator</th>
<th>CreateTime</th>
<th>UpdateTime</th>
<th>Url</th>
<th>操作</th>
</tr>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td>@item.DisplayName</td>
<td>@item.Description</td>
<td>@item.Creator</td>
<td>@item.CreateTime</td>
<td>@item.UpdateTime</td>
<td>@item.Url</td>
<td><span onclick="tblEdit('@item.ID')">编辑</span> | <span onclick="tblDelete('@item.ID')">删除</span> | <span onclick="ElementList('@item.ID')">ElementList</span></td>
</tr>
}
</tbody>
</table>

.tbl td {border: 1px solid #999999;cellpadding: 0px;cellspacing: 0px;}

.tbl span {color: #3399FF;}

.tbl th {border: 1px solid #999999;background-color: #CCCCCC;font-weight: bold;}

/*.tbl .even {background-color: #efeeef;}//偶数行样式*/

.tbl .odd {background-color: #fff;}//奇数行样式

.tbl .over {background-color: #E6E5FF;}

$(document).ready(function () {
TblCss();
});
function TblCss() {
$(".tbl tbody>tr:odd").addClass("odd");
$(".tbl tbody>tr").mouseover(function () {
$(this).addClass("over");
});
$(".tbl tbody>tr").mouseout(function () {
$(this).removeClass("over");
});
}

$(document).ready(function(){})；可以简写为：$(function(){});