文档章节

利用Jquery实现GridView隔行换色,全选,鼠标滑过当前行效果

深圳大道
 深圳大道
发布于 2016/12/29 15:25
字数 192
阅读 3
收藏 0
$(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);
    });
}


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



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

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/7914876

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
JavaWeb04-HTML篇笔记(三)

1.1 案例二:表格隔行换色的案例:1.1.1 需求: 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 基本过滤选择器: 如果样式...

我是小谷粒
2018/05/08
0
0
分享简单而实用的网页菜单导航【提供源码】

菜单导航对于一个网站来说非常重要,对于浏览者来说,导航设计的好坏将直接影响用户的体验。这里,我们为网页开发者提供了一系列简单但是实用的导航菜单例子及其源码,仅供参考和学习。 CSS3...

tp_wire
2012/06/14
454
1
JS杂谈系列-jquery-插件开发小记

//=======================start(function ($) {//扩展 必须$.fn.extend({ //插件名称 必须colh: function (options) {//默认参数 (放在插件外面,避免每次调用插件都调用一次,节省内存)va...

透笔度
2015/08/04
440
1
盘点6个时尚有用的 jQuery 和 CSS3 实例

很久以来,jQuery作为JS框架已经被大部分开发者所认同了,从而也诞生了不少让前端开发者兴奋的插件。然后随着CSS3的兴起,很多jQuery插件也都演变得符合CSS3标准,插件内容也更充实了,页面也...

yykj
2012/12/10
3.8K
6
好程序员web前端精讲 web前端三要素

web前端就业前景十分广阔,吸引了行里行外无数的小伙伴入坑求学。好程序员今日开讲,解析web前端三要素,无论是小白上路还是技术进阶都有必要一读!话不多说,三要素是哪三个重要知识点呢!这...

好程序员IT
06/04
5
0

没有更多内容

加载失败,请刷新页面

加载更多

基于Prometheus和Grafana的监控平台 - 环境搭建

相关概念 微服务中的监控分根据作用领域分为三大类,Logging,Tracing,Metrics。 Logging - 用于记录离散的事件。例如,应用程序的调试信息或错误信息。它是我们诊断问题的依据。比如我们说...

JAVA日知录
53分钟前
5
0
PHP运行时全局构造体

struct _php_core_globals { zend_bool magic_quotes_gpc; // 是否对输入的GET/POST/Cookie数据使用自动字符串转义。 zend_bool magic_quotes_runtime; //是否对运行时从外部资源产生的数据使...

冻结not
54分钟前
4
0
webpack插件html-webpack-plugin

本文转载于:专业的前端网站→webpack插件html-webpack-plugin 1、插件安装 npm install html-webpack-plugin --save-dev 2、插件使用 webpack.config.js配置文件为: var htmlWebpackPlugin=...

前端老手
今天
6
0
数据挖掘

zhengchen1996
今天
4
0
nginx配置反向代理

文章来源 运维公会:nginx配置反向代理 1、简介 Nginx最为常见的一种功能就是配置反向代理。配置也是十分的简单,只需要用到proxy模块即可。 怎么查看nginx默认的安装模块? 在nginx的安装目...

运维团
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部