zoukankan      html  css  js  c++  java
  • 当每次鼠标点选GRIDVIEW每行的文本框时,该行会加亮

    在老外的BLOG上看到一段好的JAVASCRIPT,很简单,但很实用。就是说,在asp.net 2.0中,在一个带有TEXTBOX的GRIDVIEW中,有很多行记录,当每次鼠标点选每行的文本框时,该行会加亮,而离开时(丢失焦点时),该行会还原为原来的颜色。其DEMO如下

    asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="true" CellPadding="4" Font-Names="Verdana" ForeColor="#333333" GridLines="None" >
        
        <Columns>
       
        <asp:TemplateField HeaderText="Points">
        <ItemTemplate>
        <asp:TextBox onBlur="ResetColor()" onFocus="ChangeColor()" ID="txtPoint" runat="server" />
        </ItemTemplate>
        </asp:TemplateField>
       
        <asp:TemplateField HeaderText="companyname">   
        <ItemTemplate>
        <asp:Label ID="companyname" runat="server" Text='<%# Eval("companyname") %>' />
        </ItemTemplate>
        </asp:TemplateField>
       
        <asp:TemplateField HeaderText="contactname">
        <ItemTemplate>
        <asp:Label ID="contactname" runat="server" Text='<%# Eval("contactname") %>' />
        </ItemTemplate>
        </asp:TemplateField>  
           
        </Columns>
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <RowStyle CssClass="RowStyleBackGroundColor" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle CssClass="RowAlternateStyleBackGroundColor" />
       
        </asp:GridView>

    然后就是javascript了
    <script language="javascript">

    var oldRowColor;

    // this function is used to reset the background color
    function ResetColor()
    {
        var obj = window.event.srcElement;
       
        if(obj.tagName == "INPUT" && obj.type == "text")
        {
             obj = obj.parentElement.parentElement;
            
             obj.className = oldRowColor; 
                           
            
        }    
    }

    // this function is used to change the backgound color
    function ChangeColor()
    {
       var obj = window.event.srcElement;
       
        if(obj.tagName == "INPUT" && obj.type == "text")
        {
             obj = obj.parentElement.parentElement;
             oldRowColor = obj.className;
             obj.className = "HighLightRowColor";
               
        }   
    }

    </script>
      在上面的javascript中的changecolor()方法,首先用 var obj = window.event.srcElement;将得到当前聚焦事件发生时的对象,然后判断是否是文本框,如果是文本框的话,则用新的CSS(obj.className,当然,你要先设置好CSS的两类不同形式),注意此时用obj.parentElement.parentElement;
    ,得出的是<tr>对象,最后就是得出如<tr class="xxxx">类的形式了

  • 相关阅读:
    制衡技术的新蓝海
    制衡技术,从Adblock所想到的
    centos6中安装新版 Elasticsearch 7.x
    nrm 安装与npm镜像切换
    james2.3 配置收件 之 MariaDB数据库配置
    手动搭建apache james邮件服务器,实现邮件功能
    James 如何作为服务在后台启动
    安装最新版RabbitMQ v3.7.13 以及基本配置
    mac 下 通过 brew 安装 MariaDB
    Mac 上安装maven
  • 原文地址:https://www.cnblogs.com/pingkeke/p/474779.html
Copyright © 2011-2022 走看看