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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
浅谈javascript回调函数
Dec 07 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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性能优化的介绍
2013/06/20 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
php pdo操作数据库示例
2017/03/10 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
12条写出高质量JS代码的方法
2018/01/07 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
个人简历自荐信
2013/12/05 职场文书
宣传普通话标语
2014/06/27 职场文书
催款通知书范文
2015/04/17 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python