如何使用 javascript 修改网格视图单元格值

How to amend gridview cell value with javascript

本文关键字：视图 单元格 网格 修改 何使用 javascript      更新时间：2023-09-26

我创建了一个网格视图，如下所示：

<asp:GridView ID="Grid1" runat="server" CellPadding="1" ClientIDMode="Static" AutoGenerateColumns="false" ShowHeader="true">
        <Columns>
            <asp:TemplateField headertext="ColumnA">
                <ItemTemplate>
                    <asp:label id="ColumnA" Text='<%#Eval("ColumnA")%>' runat="server"/>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

如何在 javascript 中添加单击事件（在标签上）并更改单元格（单击）的值？我已经尝试了使用 jquery 的各种方法，但没有一种工作正常，希望你能帮助我。谢谢。

在 jQuery 中设置一些类并在 jQuery 中应用类选择器怎么样？然后，您只需访问标签的内容即可生成新值，而无需唯一的行 ID。

<asp:GridView ID="Grid1" runat="server"  // DataSource="<%# DataItems %>" 
    CellPadding="1" ClientIDMode="Static" AutoGenerateColumns="false" ShowHeader="true">
    <Columns>
        <asp:TemplateField headertext="ColumnA">
            <ItemTemplate>
                <asp:label CssClass="ColumnA" Text='<%#Eval("ColumnA")%>' runat="server"/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script>
    $("#Grid1 .ColumnA").click(function () {
        var content = $(this).html();
        $(this).html(content + " Changed");
    });
</script>

如果你有需要，那么你还可以在data-*属性中存储一些额外的（如唯一id）信息：

 <asp:label data-id='<%#Eval("UniqueIdDataForClickEvent")%>' CssClass="ColumnA" Text='We have no actual data' runat="server"/>
...
<script>
    $("#Grid1 .ColumnA").click(function () {
        var content = $(this).data("id");
        $(this).html("We had unique id " + content);
    });
</script>
相关文章：