如何使用javascript修改gridview单元格值答案

【问题标题】：How to amend gridview cell value with javascript如何使用javascript修改gridview单元格值
【发布时间】：2015-03-13 18:23:59
【问题描述】：

我创建了一个gridview如下：

<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 选择器？
asp.net 数据表不会为每一行生成唯一的 id，所以我不能仅通过 jquery 的选择器更改值，所以您知道如何做到这一点吗？谢谢

标签： javascript c# jquery asp.net gridview

【解决方案1】：

如何为您的标签设置一些class 并在jQuery 中应用class selector。然后，您可以直接访问标签的内容以生成新值，而无需唯一的行 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-* Attributes 中存储一些额外的（如唯一 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>

【讨论】：

@Engene 如何使 jQuery 所做的更改在 c# 代码中可用？