Jquery 구현 목록(행마다 색상 변경, 모두 선택, 현재 행 위로 마우스 이동) 효과 example_jquery

[javascript]

复aze代码 代码如下:

$(function () {
Gridview("GridView1")
});

//gridview
function Gridview(objgridview) {
    //obj ID 가져오기
    var GridviewId = "#" objgridview;
    //짝수
    $(gridviewId ">tbody tr:even").addClass("NormalColor");
    //첫 번째
    $(gridviewId ">tbody tr:first").removeClass("NormalColor").addClass("HeadColor");
    //홀수
    $(gridviewId ">tbody tr:odd").addClass("AlterColor");
    //이동 및 클릭
    $(gridviewId ">tbody tr").slice(1).hover(function () {
        $(this).addClass("HoverColor");
    }, function () {
        $(this).removeClass("HoverColor")
    });
    //모두 확인
    $("#chkAll").click(function () {
        $(gridviewId '>tbody >tr >td >input:checkbox').attr( '체크됨', this.checked)
    });
    //상태 확인
    $(gridviewId ' >tbody >tr >td >input:checkbox').click(function () {
        var expr1 = GridviewId ' >tbody > tr >td >input:checkbox:checked';
        var expr2 = GridviewId ' >tbody >tr >td >input:checkbox'
       var selectAll = $(expr1).length = = $(expr2).length;
        $('#chkAll').attr('checked', selectAll)
    });
}

[html]

复代码 代码如下:

 
      
      
lt;헤더 템플릿>

lt;/HeaderTemplate>           
       
           
       
    
  

[css]

复代码 代码如下:

.HeadColor{배경색: #E0ECFF; 색상:#333;줄 높이:25px;}
.AlterColor{배경 색상: #edf1f8; 줄 높이:20px;}
.NormalColor{배경색: #f7f6f3; line-height:20px;}
.HoverColor{배경: #89A5D1; 줄 높이:20px;}
.SelectColor{배경색: #ACBFDF; 줄 높이:20px;}