Question

我有一个数据网格，它在行中有一个复选框。我想在单击复选框时更改行的背景颜色。示例代码：

 <asp:DataGrid ID="Grid" runat="server"  DataKeyField="KeyID" CssClass="grid"
                        AutoGenerateColumns="False" CellPadding="10" ForeColor="#333333" 
                            GridLines="None" OnPageIndexChanged="Grid_PageIndexChanged" 
                        OnEditCommand="Grid_EditCommand" OnDeleteCommand="GetResult" 
                            onitemdatabound="Grid_ItemDataBound" >
                        <Columns>

                            <HeaderTemplate>
                                    <input id="chkAllItems" type="checkbox" onclick="javascript:HeaderClick(this);"/>
                            </HeaderTemplate>
                            <ItemTemplate>
                                    <asp:CheckBox runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "KeyID")%>' ID="checkBoxID" AutoPostBack="false" OnClick="chechkedChanged(this);" ></asp:CheckBox>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                        <asp:TemplateColumn>
                             <HeaderTemplate>
                                     <label for="male">Category</label>
                            </HeaderTemplate>
                            <ItemTemplate>
                                    <asp:TextBox Text="" ID="Category" runat="server" AutoPostBack="false" MaxLength="10" CssClass="tb5" > </asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                        <asp:EditCommandColumn  EditText="Edit" CancelText="Cancel" UpdateText="Update" HeaderText="Edit">
                        </asp:EditCommandColumn>
                        <asp:ButtonColumn CommandName="Delete" HeaderText="TDK" Text="tdk"></asp:ButtonColumn>

                        </Columns>
                        <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                        <SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                        <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" Mode="NumericPages" />
                        <AlternatingItemStyle BackColor="#FAAC58" />
                        <ItemStyle BackColor="#81DAF5" ForeColor="#333333" />
                        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                </asp:DataGrid>

如何在javascript中更改行的背景颜色？

Answer 1

我的简单GridView控件包含Checkbox，Dept No，Dept Name，Location列。

单击CheckBox时，相应的行背景颜色将更改为红色背景。 .aspx页面中的Javascript代码在实现您的功能方面起着重要作用。

.aspx代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function ChangeBackgroundColor(checkBox1) {
            var parent = document.getElementById("<%= GridView1.ClientID %>");
            var items = parent.getElementsByTagName("input");
            for (i = 0; i < items.length; i++) {
                if ((items[i].type == "checkbox") && (items[i].checked)) {
                    alert(items[i].id + ' is checked');
                    items[i].parentElement.parentElement.style.backgroundColor = "Red";
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            onrowdatabound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" onclick="javascript:ChangeBackgroundColor(this);" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Dept No">
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("DeptNo") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Dept name">
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("DName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Location">
                    <ItemTemplate>
                        <asp:Label ID="Label4" runat="server" Text='<%# Bind("LOC") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

代码背后的代码如下所示。

SqlConnection objConn = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["STERIAConnectionString"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
    var objCmd = new SqlCommand("SELECT * FROM DEPT", objConn);
    objConn.Open();
    GridView1.DataSource = objCmd.ExecuteReader();
    GridView1.DataBind();
    objConn.Close();
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var checkbox1 = e.Row.FindControl("CheckBox1") as CheckBox;
        checkbox1.Attributes.Add("OnClick","return ChangeBackgroundColor('checkbox1');");
    }
}

希望此代码可以帮助您。如果您需要更多帮助，请告诉我。

更改datagrid中行的背景颜色

1 个答案: