Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例

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

发布时间:2014-01-22   编辑:www.jquerycn.cn
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例,需要的朋友可以参考一下
[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]
复制代码 代码如下:

  <asp:GridView ID="GridView1" runat="server" ClientIDMode="Static" Width="100%" CssClass="gvCss">
       <Columns>
     <asp:TemplateField> 
lt;HeaderTemplate>
<input type="checkbox" id="chkAll" name="chkAll"  />
lt;/HeaderTemplate>           
        <ItemTemplate>
            <input type="checkbox" id="chkItem"  name="chkItem" value='<%# Eval("ID") %>' />
        </ItemTemplate>
     </asp:TemplateField>
   </asp:GridView>

[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;}

您可能感兴趣的文章:
使用jquery hover事件实现表格的隔行换色功能示例
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
jQuery方法简洁实现隔行换色及toggleClass的使用
js 隔行变色的最简单代码
jquery写个checkbox——类似邮箱全选功能
js 隔行变色与鼠标悬停自动变色的实现代码
表格隔行变色的js实现代码
js 隔行变色 鼠标经过变色的代码
javascript实现隔行变色函数代码一例
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一

关键词: 隔行换色  全选  当前行   
[关闭]