为每一行分别更改gridview中控件的css

Question

我的 gridview 模板字段中有四个按钮。 我需要分别更改每一行中单击按钮的 css。 例如在第一行，第一个按钮被点击。那么它必须是黄色的。在第 3 行中，单击第二个按钮。那么它必须是黄色的等等。 这是我的网格视图

<asp:GridView OnRowCommand="SelectedPollGridView_RowCommand" ID="SelectedPollGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="PollID" DataSourceID="SelectedPollSqlDataSource">
    <Columns>
        <asp:TemplateField>            
            <ItemTemplate>
                <asp:Label Visible="false" ID="PollIDLabel" runat="server" Text='<%#Eval("PollID") %>'></asp:Label>

                <div runat="server" id="MainDiv" class="text-right">
                    <div runat="server" id="O1Div" visible='<%#Eval("O1Vis") %>' class="radio ">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O1" ID="O1Button" runat="server" Text=" 1" />
                    </div>
                    <div runat="server" id="O2Div" visible='<%#Eval("O2Vis") %>' class="radio">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O2" ID="O2Button" runat="server" Text=" 2" />
                    </div>
                    <div runat="server" id="O3Div" visible='<%#Eval("O3Vis") %>' class="radio">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O3" ID="O3Button" runat="server" Text=" 3" />
                    </div>
                    <div runat="server" id="O4Div" visible='<%#Eval("O4Vis") %>' class="radio">
                        <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O4" ID="O4Button" runat="server" Text=" 4" />
                    </div>
                </div>

            </ItemTemplate>
        </asp:TemplateField>
    </Columns>    
</asp:GridView>

下面是代码：

protected void SelectedPollGridView_RowCommand(object sender, GridViewCommandEventArgs e)
{        
    int index = Convert.ToInt32(e.CommandArgument); 
    GridViewRow row = SelectedPollGridView.Rows[index];

    Label myPollIDLAbel = (Label)row.FindControl("PollIDLabel");

    if (e.CommandName == "O1")
    {
        //chnaging the css of O1 button JUST IN THIS ROW

    }
    else if (e.CommandName == "O2")
    {
        //chnaging the css of O2 button JUST IN THIS ROW
    }
    else if (e.CommandName == "O3")
    {
        //chnaging the css of O3 button JUST IN THIS ROW
    }
    else if (e.CommandName == "O4")
    {
        //chnaging the css of O4 button JUST IN THIS ROW
    }     
}

Answer 1

您只需使用以下代码：

if (e.CommandName == "O1")
{
  Button O1Button = (Button)row.FindControl("O1Button");

  //Change the background-color:
  O1Button.Style.Add("background-color", "yellow");

  //Change the class
  O1Button.CssClass = "class-name";
}
else if (e.CommandName == "O2")
{
    //chnaging the css of O2 button JUST IN THIS ROW
    Button O2Button = (Button)row.FindControl("O2Button");

  //Change the background-color:
  O2Button.Style.Add("background-color", "yellow");

  //Change the class
  O2Button.CssClass = "class-name";
}
else if (e.CommandName == "O3")
{
    //chnaging the css of O3 button JUST IN THIS ROW
    Button O3Button = (Button)row.FindControl("O3Button ");

  //Change the background-color:
  O3Button.Style.Add("background-color", "yellow");

  //Change the class
  O3Button.CssClass = "class-name";
}
else if (e.CommandName == "O4")
{
    //chnaging the css of O4 button JUST IN THIS ROW
    Button O4Button= (Button)row.FindControl("O4Button");

  //Change the background-color:
  O4Button.Style.Add("background-color", "yellow");

  //Change the class
  O4Button.CssClass = "class-name";
}     

Answer 2

我建议阅读如何在 javascript 中执行此操作，因为对元素的 css 进行简单更改应该很容易。但是，如果您需要在服务器上执行此操作，您应该可以执行以下操作：

if (e.CommandName == "O1")
{
    //chnaging the css of O1 button JUST IN THIS ROW
    Button O1Button = (Button)row.FindControl("O1Button");

    //Change the background-color:
    O1Button.Style.Add("background-color", "yellow");

    //Change the class
    O1Button.CssClass = "class-name";
}

其他按钮也是如此。