>  기사  >  웹 프론트엔드  >  Jquery 구현 목록(행마다 색상 변경, 모두 선택, 현재 행 위로 마우스 이동) 효과 example_jquery

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

WBOY
WBOY원래의
2016-05-16 17:32:241192검색

[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;}
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.