Maison > interface Web > js tutoriel > le corps du texte

Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例_jquery

WBOY
Libérer: 2016-05-16 17:32:24
original
1187 Les gens l'ont consulté

[javascript]

复制代码 代码如下:

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

//gridview
function gridview(objgridview) {
    //get obj id
    var gridviewId = "#" + objgridview;
    //even
    $(gridviewId + ">tbody tr:even").addClass("NormalColor");
    //first
    $(gridviewId + ">tbody tr:first").removeClass("NormalColor").addClass("HeadColor");
    //odd
    $(gridviewId + ">tbody tr:odd").addClass("AlterColor");
    //move and click
    $(gridviewId + ">tbody tr").slice(1).hover(function () {
        $(this).addClass("HoverColor");
    }, function () {
        $(this).removeClass("HoverColor");
    });
    //all check
    $("#chkAll").click(function () {
        $(gridviewId + '>tbody >tr >td >input:checkbox').attr('checked', this.checked);
    });
    //check status
    $(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;HeaderTemplate>

lt;/HeaderTemplate>           
       
           
       

    

  


[css]
复制代码 代码如下:

.HeadColor{background-color: #E0ECFF; color:#333;line-height:25px;}
.AlterColor{background-color: #edf1f8; line-height:20px;}
.NormalColor{background-color: #f7f6f3; line-height:20px;}
.HoverColor{background: #89A5D1; line-height:20px;}
.SelectColor{background-color: #ACBFDF; line-height:20px;}
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!