如何通过onclick切换gridrow的背景色? [英] how to toggle the backcolor of the gridrow by onclick ?

问题描述

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
   if (e.Row.RowType == DataControlRowType.DataRow)
{

e.Row.Attributes.Add("onclick", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#EEFF00'");
}

}

当我单击任何网格行时，颜色将变为黄色，并且通过单击同一行，我应该恢复其默认颜色...请引导解决此问题...

when i click on any of the gridrow the color is changing to yellow and by clicking the same row i should get back its default color... please guide through this issue...

推荐答案

看看cp上的这个示例，它一定会对您有所帮助:
更改行中颜色ASP.NET中的GridView [

Have a look on this example on cp, it will surely help you out:
Changing the color of a row in a GridView in ASP.NET[^]

And Check this code:

protected void MyGridView_RowCreated(object sender, GridViewRowEventArgs e)
   {

       string rowStyle = "this.style.backgroundColor
       = 'yellow'";
       string rowStyleClickedTwice =
       "this.style.backgroundColor = 'blue'";
       string rowID = String.Empty;

       if (e.Row.RowType == DataControlRowType.DataRow)
       {
           rowID = "row"+e.Row.RowIndex;

           e.Row.Attributes.Add("id",
           "row"+e.Row.RowIndex);
           e.Row.Attributes.Add("onclick",
           "ChangeRowColor(" +"'" + rowID + "'" + ")");
       }
   }

JavaScript代码:

JavaScript code:

<input type="hidden" id="hiddenColor"  />

<script language ="javascript" type="text/javascript">

document.body.style.cursor = 'pointer';


function ChangeRowColor(rowID)
{
   var color = document.getElementById(rowID)
   .style.backgroundColor;
   alert(color);

   if(color != 'yellow')
    document.getElementById("hiddenColor").style
    .backgroundColor = color;

    alert(oldColor);

   if(color == 'yellow')
    document.getElementById(rowID).style.backgroundColor
    = document.getElementById("hiddenColor").style.backgroundColor;
    else document.getElementById(rowID).style.backgroundColor = 'yellow';
}
</script>

现在，当您单击GridView行时，它将把行背景更改为黄色.当您再次单击该行时，它将带回原始颜色.因此，换句话说，是否使用自动格式为网格着色都没有关系，隐藏字段将保存GridView行的先前状态(颜色)，并通过单击该行两次将为该行分配原始状态.颜色.

Now, when you click on the GridView row it will change the row background to yellow. When you click the row again then it will bring back the original color. So, in other words it does not matter if you are using Auto-Format to color your grid, the hidden field will save the previous state (color) of the GridView row and by clicking on the row twice the row will be assigned the original color.

protected void GridViewStudentList_RowCreated(object sender, GridViewRowEventArgs e)
    {

        // only apply changes if its DataRow

        if (e.Row.RowType == DataControlRowType.DataRow)
        {



            e.Row.Attributes.Add("onmouseover",

          "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#FF9955'");



            e.Row.Attributes.Add("onmouseout",

            "this.style.backgroundColor=this.originalstyle;");

        }

    }


//This is an HTML code...

 <asp:GridView ID="GridViewStudentList" SelectedRowStyle-ForeColor="#FBA16C" OnRowCreated="GridViewStudentList_RowCreated"

                                                    runat="server" Width="100%" CellPadding="4" ForeColor="#333333" GridLines="None"

                                                    AutoGenerateColumns="false">
                                                    <RowStyle BackColor="#EFF3Ff" />
                                                    <Columns>
                                                        <asp:TemplateField>
                                                            <HeaderTemplate>
                                                                <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
                                                            </HeaderTemplate>
                                                            <ItemTemplate>
                                                                <asp:LinkButton ID="LinkButton1" Text='<%# DataBinder.Eval(Container.DataItem,"FirstName")%>'

                                                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "StudentId")%>' OnClick="lnkStudent_Click"

                                                                    runat="server"></asp:LinkButton>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                    </Columns>
                                                    <Columns>
                                                        <asp:TemplateField>
                                                            <HeaderTemplate>
                                                                <asp:Label ID="Label1" runat="server" Text="Class Name"></asp:Label>
                                                            </HeaderTemplate>
                                                            <ItemTemplate>
                                                                <asp:LinkButton ID="LinkButton2" ForeColor="BurlyWood" Text='<%# DataBinder.Eval(Container.DataItem,"ClassTitle")%>'

                                                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "StudentId")%>' OnClick="lnkStudent_Click"

                                                                    runat="server"></asp:LinkButton>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                    </Columns>
                                                    <%--<Columns>
                                                   <asp:BoundField DataField="ClassId" HeaderText="Class Id"
                                                            ControlStyle-CssClass="nameFont" >
                                                            <ControlStyle CssClass="nameFont" />
                                                        </asp:BoundField>
                                                </Columns>--%>
                                                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                                                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                                                    <HeaderStyle BackColor="#5F9EA0" Font-Bold="True" ForeColor="White" />
                                                    <EditRowStyle BackColor="#2461BF" />
                                                    <AlternatingRowStyle BackColor="White" />
                                                </asp:GridView>

string rowID = String.Empty;

如果(e.Row.RowType == DataControlRowType.DataRow)

{

rowID ="row" + e.Row.RowIndex;

e.Row.Attributes.Add("id"，"row" + e.Row.RowIndex);

e.Row.Attributes.Add("onclick"，"ChangeRowColor(" +""+ rowID +"" +)");

}

string rowID = String.Empty;

if (e.Row.RowType == DataControlRowType.DataRow)

{

rowID = "row"+e.Row.RowIndex;

e.Row.Attributes.Add("id","row"+e.Row.RowIndex);

e.Row.Attributes.Add("onclick","ChangeRowColor(" +"''" + rowID + "''" + ")");

}

这篇关于如何通过onclick切换gridrow的背景色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！