0

データグリッドがあり、行にチェックボックスがあります。チェックボックスをクリックしたときに行の背景色を変更したい。コード例：

 <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の行の背景色を変更するにはどうすればよいですか？

4

1 に答える 1

1

私の単純な GridView コントロールには、チェックボックス、部門番号、部門名、場所の列が含まれています。

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');");
    }
}

このコードがお役に立てば幸いです。さらにサポートが必要な場合はお知らせください。

于 2013-02-21T06:58:36.593 に答える