当我检查复选框时,如何更改特定的行样式? C#ASP.NET

时间:2012-04-28 04:12:34

标签: c# asp.net css gridview

所以我在ASP.NET上获得了这个gridview,它是关于一个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>

2 个答案:

答案 0 :(得分:2)

这是使用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" : "");
        });
    });

答案 1 :(得分:0)

试试这个:

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

您可以使用toggleClass('CssClassName')在复选框点击时切换课程:

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

层次结构是tr> td&gt;复选框,我们反过来改变tr / row的css。