使用javascript在gridview中添加新行

Question

在下面的代碼中，我有 gridview，它具有文本框和下拉列表，我想使用 javascript 添加行。我的目標是避免在添加行時回發。

標記代碼：

<asp:GridView runat="server" ID="gvProduct" AutoGenerateColumns="false" 
              Width="100%" CellPadding="4" ForeColor="#333333" ShowFooter="true"
              PageSize-Mode="NumericPages" PagerStyle-Visible="true" AllowPaging="false" AllowSorting="true"
              CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
              OnRowDataBound="gvProduct_RowDataBound" OnRowCommand="gvProduct_RowCommand" OnRowDeleting="gvProduct_RowDeleting">
  <Columns>
    <asp:TemplateField HeaderText="Product Name" ItemStyle-Width="350px">
      <ItemTemplate>
        <asp:DropDownList ID="ddlProduct" runat="server" AutoPostBack="false" Style="width: 100%; height:23px" ></asp:DropDownList>
      </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Current Stock" ItemStyle-Width="80px" Visible="false">
      <ItemTemplate>
        <asp:Label ID="lblCurrentStock" runat="server" onkeypress="return isNumberKey(event, false);" Height="20px" style="width:80px" Enabled="false" ></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Quantity" ItemStyle-Width="80px">
      <ItemTemplate>
        <asp:TextBox ID="txtQuantity"  onkeypress="return isNumberKey(event, false);"    runat="server" Height="20px" Width="150px" onblur="js_function(this);"   > </asp:TextBox>
        <asp:Label ID="lblunittype" runat="server" ></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

<asp:Button ID="Button2" OnClientClick="AddRow(); return false;" runat="server" Text="Button" />

Javascript代碼：

function AddRow() {
    var table = document.getElementById('<%=gvProduct.ClientID %>');
    var newRow = table.insertRow();
    var i = 0;
    for (i = 0; i < table.rows[0].cells.length; i++) {
        var newCell = newRow.insertCell();
        newCell.innerHTML = 'New Row';
    }
} 

Answer 1

• asp 中的 Gridview = HTML 中的表格
• asp 中 Gridview 中的新行 = HTML 中表中的新行

示例 JavaScript 代碼：

function AddRow() {
    let tableRef = document.getElementById('MainContent_gvItems');
    let newRow = tableRef.insertRow(-1);//inserts at last row
    let Cell0 = newRow.insertCell(0);
    let Text0 = document.createTextNode('mydata');
    Cell0.appendChild(Text0);
}

順便說一句，GridView 必須是可見的，即使它是空的。

Answer 2

如果您只想向表格添加行以進行演示，那么@Mostafa Shehata答案應該可以正常工作。

但是，在 JavaScript 中添加行不會將其附加到 GridView 數據源。 因此，您將在后端處理數據時遇到問題（例如保存到數據庫）。

兩種可能的解決方案：

1. 用 html 表替換 GridView。 可以使用 JavaScript 調用 Restful API 來填充和更新數據。

2. 用空行預填充 GridView 數據源。

• 數據綁定 x 空字段數量（例如 10 個空字段）。
• 在 GridView 標記中使用 css 隱藏所有行。
• 運行 JavaScript 以顯示非空行。
• “添加行”按鈕只能顯示第一個空行。
• 如果已使用所有空字段，則添加某種通知。 （例如：“請保存您的數據，然后再繼續”）。
• 在后面的代碼中，在使用它之前刪除所有空字段。