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

  • 相关阅读:
    PHP 8.0 带来的新特性
    do sth 之 提取了一份文档
    Java入门15---网络编程
    Java入门14---logback
    限流策略
    JConsole 可视化工具
    SpringBoot注解---6.声明式事务
    SpringBoot注解---5.AOP
    SpringBoot注解---4.扩展原理
    SpringBoot注解---2.组件赋值
  • 原文地址:https://www.cnblogs.com/pingkeke/p/474779.html
Copyright © 2020-2023  润新知