マウスで行を上書きパリティ行の背景色が異なるcss+jquery Tableをハイライト表示

1865 ワード

Html:
 
            @foreach (var item in Model)
            {
                
            }
        
Name DisplayName Description Creator CreateTime UpdateTime Url
@item.Name @item.DisplayName @item.Description @item.Creator @item.CreateTime @item.UpdateTime @item.Url | | ElementList

CSS:
.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;}

Jquery:
 $(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(){});