• 当每次鼠标点选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">类的形式了

  • 相关阅读:
    2020年. NET Core面试题
    java Context namespace element 'component-scan' and its parser class ComponentScanBeanDefinitionParser are only available on JDK 1.5 and higher 解决方法
    vue 淡入淡出组件
    java http的get、post、post json参数的方法
    vue 父子组件通讯案例
    Vue 生产环境解决跨域问题
    npm run ERR! code ELIFECYCLE
    Android Studio 生成apk 出现 :error_prone_annotations.jar (com.google.errorprone:error) 错误
    记忆解析者芜青【总集】
    LwIP应用开发笔记之十:LwIP带操作系统基本移植
  • 原文地址:https://www.cnblogs.com/pingkeke/p/474779.html
Copyright © 2020-2023  润新知