当我选中复选框时，如何更改该特定的行样式?C# ASP.NET

本文关键字：样式 NET ASP 复选框 何更改 | 更新日期: 2023-09-27 18:32:35

所以我在 ASP.NET 上得到了这个网格视图，它是关于一个 gmail 客户端的，我制作了一个带有复选框的模板字段，用于同时选择多封邮件，但首先当你选择一封邮件我想更改行背景颜色时，我已经有了我的 CSS，但我不知道如何触发操作或如何知道代码中选择了哪一行。这是我的网格模板：

 <asp:GridView ID="inboxGrid" runat="server" 
        AutoGenerateColumns="false" CssClass="inbox" ShowHeader="false" BorderStyle="None" GridLines="None">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                <asp:CheckBox ID="chkSelect" runat="server" />
                </ItemTemplate>
                <ItemStyle Width="24" CssClass="check"/>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemStyle CssClass="from" />
                <ItemTemplate>
                <asp:Label ID="lblFrom" runat="server" 
                    Text = '<%# Eval("From") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemStyle CssClass="subject" />
                <ItemTemplate>
                <asp:Label ID="lblSubject" runat="server" Text='<%# Eval("Subject") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemStyle CssClass="date" />
                <ItemTemplate>
                <asp:Label ID="lblFecha" runat="server" Text='<%# Eval("Fecha") %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <RowStyle CssClass="inbox"/>
    </asp:GridView>

当我选中复选框时，如何更改该特定的行样式?C# ASP.NET

这是一个使用 JQuery 的解决方案

前提是您将一个名为 chk 的 CssClass 添加到 asp：复选框

<asp:CheckBox ID="chkSelect" runat="server" CssClass="chk" />

这是脚本

$(document).ready(function () {
        $(".chk :checkbox").live("click", function () {
            $(this).closest("tr").css("background-color", this.checked ? "#0000FF" : "");
        });
    });

试试这个：

<asp:CheckBox ID="chkSelect" runat="server" OnClick="changeCss(this.id);" />

您可以使用toggleClass('CssClassName')在单击复选框时切换类：

function changeCss(ctrlId){
    $(ctrlId).parent().parent().toggleClass('check');
}

层次结构是 tr> td>复选框，我们反向更改 tr/row 的 css。

相关文章：