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


Posted in Javascript onJune 09, 2013

[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;}
Javascript 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 #Javascript
ScrollDown的基本操作示例
Jun 09 #Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 #Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 #Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 #Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 #Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 #Javascript
You might like
PHP 基本语法格式
2009/12/15 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python输出指定月份日历的方法
2015/04/23 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Django配置跨域并开发测试接口
2020/11/04 Python
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
《红军不怕远征难》教学反思
2014/04/14 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
2014年财政工作总结
2014/12/10 职场文书
教师节晚会主持词
2015/06/30 职场文书
老干部座谈会主持词
2015/07/03 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
Hive日期格式转换方法总结
2022/06/25 数据库