zoukankan      html  css  js  c++  java
  • jQuery操作Gridview全选,点击checkbox变色,隔行变色,鼠标悬停变色!

    公司以前是用纯Js写的,有些情况还会出问题,而且不好调试,干脆直接给改了!感觉还是比较简洁的!

    直接代码:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <style type="text/css">
    .AlterColor
    {
    background-color
    : #edf1f8;
    }
    .NormalColor
    {
    background-color
    : #f7f6f3;
    }
    .HoverColor
    {
    background
    : #d7e3f6; /*这个将是鼠标高亮行的背景色*/
    cursor
    : pointer;
    }
    .SelectColor
    {
    background-color
    : #d8e7b0; /*这个将是选中高亮行的背景色*/
    cursor
    : pointer;
    }
    </style>

    <script src="../JavaScript/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    //@author MaHaiBin
    //@time 2011-6-10
    $(function() {
    gridview();
    });
    function gridview() {
    //这个地方到时候获取一下gridview的客户端id
    var gridviewId = "#gridview ";
    //偶数行变色
    $(gridviewId + ">tbody tr:even").addClass("NormalColor");
    //奇数行变色n
    $(gridviewId + ">tbody tr:odd").addClass("AlterColor");
    //鼠标移上时变色 和 单击变色
    $(gridviewId + ">tbody tr").hover(function() {
    $(
    this).addClass("HoverColor");
    },
    function() {
    $(
    this).removeClass("HoverColor");
    }).click(
    function() {
    //这个地方是或取得jQuery对象
    var $check = $(this).find("input:checkbox");
    if ($check.attr("checked")) {
    $(
    this).addClass("SelectColor");
    }
    else {
    $(
    this).removeClass("SelectColor");
    }
    });
    //全选事件
    $(gridviewId + "tr:first").find(":checkbox").click(function() {
    if (this.checked) {
    $(gridviewId
    + ">tbody tr").addClass("SelectColor").find("input:checkbox").attr("checked", true);
    }
    else {
    $(gridviewId
    + ">tbody tr").removeClass("SelectColor").find("input:checkbox").attr("checked", false);
    }
    });
    }
    </script>

    </head>
    <body>
    <form id="form1" method="post" action="Default2.aspx" runat="server">
    <div>
    <table id="gridview" style=" 100%;">
    <thead>
    <tr>
    <td>
    <input type="checkbox" id="sss" />
    第一行
    </td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox1" />
    第二行
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox2" />
    第三行
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox3" />
    第四行
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox4" />
    第五行
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox5" />
    第六行
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </form>
    </body>
    </html>

  • 相关阅读:
    ASP.NET Core 2.2 : 二十七. JWT与用户授权(细化到Action)
    ASP.NET Core 2.2 : 二十六. 应用JWT进行用户认证及Token的刷新
    ASP.NET Core 发布到Linux需要注意的地方
    小程序根据数字做for循环
    Visual Studio 2019 正式版 更新内容
    CodeSmith 二、多模板按目录树批量自动生成代码
    CodeSmith 一、连接Mysql
    ASP.NET Core 2.2 十九. Action参数的映射与模型绑定
    ASP.NET Core 2.2 十八.各种Filter的内部处理机制及执行顺序
    ASP.NET Core 2.2 : 十七.Action的执行(Endpoint.RequestDelegate后面的故事)
  • 原文地址:https://www.cnblogs.com/nyth/p/2077875.html
Copyright © 2011-2022 走看看