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 相关文章推荐
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
vue 递归组件的简单使用示例
Jan 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写的MySQL数据库用户认证系统代码
2007/03/22 PHP
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
javascript 回调函数详解
2014/11/11 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
ionic3 懒加载
2017/08/16 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Python 中Pickle库的使用详解
2018/02/24 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
由面试题加深对Django的认识理解
2019/07/19 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
关于python 跨域处理方式详解
2020/03/28 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
高中体育教学反思
2014/01/29 职场文书
幼儿园老师寄语
2014/04/03 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
校长新学期寄语2016
2015/12/04 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
python 远程执行命令的详细代码
2022/02/15 Python