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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
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
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
实用自动化运维Python脚本分享
2018/06/04 Python
Python退火算法在高次方程的应用
2018/07/26 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
python导入模块交叉引用的方法
2019/01/19 Python
Pycharm小白级简单使用教程
2020/01/08 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
PyQt5实现登录页面
2020/05/30 Python
如何卸载python插件
2020/07/08 Python
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
你常见到的runtime exception
2016/09/05 面试题
介绍一下Linux文件的记录形式
2012/04/18 面试题
违反校纪校规检讨书
2014/02/15 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript