如何修改GridView的單元格的值使用javascript

Question

我已創建一個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> 

我如何添加一個click事件（在標籤上）並更改單元格的值（即點擊）在JavaScript？我已經嘗試過使用jquery的各種方式，但沒有一個能正常工作，希望你能幫助我。謝謝。

Answer 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>