如何在JavaScript中刪除GridView中的所有行？

我有一個GridView和一個文本框。如果我們在文本框中輸入文本，我想清除GridView中的所有行。如何使用JavaScript做到這一點？如何在JavaScript中刪除GridView中的所有行？

在頁面加載中，我從後端填充網格。它可能有行或不行。但是當我在文本框中輸入文本時，我想清除GridView。

這是我的源代碼。

<table> 
    <tr> 
     <td> 
      <asp:TextBox ID="txtPercentage" runat="server"></asp:TextBox> 
     </td> 
    </tr> 
    <tr> 
    <td> 
     <asp:GridView ID="gvAttribute" runat="server" AutoGenerateColumns="False" CssClass="datagrid" 
      EnableTheming="False" DataKeyNames="TaxAttributeID" OnRowDataBound="gvAttribute_RowDataBound" 
      OnSelectedIndexChanged="gvAttribute_SelectedIndexChanged" Width="100%"> 
      <EmptyDataTemplate> 
       <table width="100%" border="0" cellpadding="0" cellspacing="1"> 
        <tr> 
         <th scope="col"> 
          Attribute Name 
         </th> 
         <th scope="col"> 
          Tax Percentage 
         </th> 
         <th scope="col"> 
          Reference Amount 
         </th> 
         <th scope="col"> 
          Reference Amount 
         </th> 
         <th scope="col"> 
          Sign 
         </th> 
         <th scope="col"> 
          Tax Amount 
         </th> 
        </tr> 
       </table> 
      </EmptyDataTemplate> 
      <AlternatingRowStyle CssClass="table_oddrow" /> 
      <Columns> 
       <asp:BoundField DataField="TaxAttributeID" HeaderText="TaxAttributeID" Visible="False" /> 
       <asp:BoundField DataField="TaxAttributeName" HeaderText="Attribute Name" /> 
       <asp:BoundField DataField="TaxPercentage" HeaderText="Tax Percentage" /> 
       <asp:BoundField DataField="ReferenceAmount" HeaderText="Reference Amount" /> 
       <asp:BoundField DataField="ReferenceTypeID" HeaderText="ReferenceTypeID " Visible="False" /> 
       <asp:BoundField DataField="ReferenceType" HeaderText="Reference Type" /> 
       <asp:TemplateField HeaderText="CrDrIndicator" Visible="False"> 
        <ItemTemplate> 
         <asp:Label ID="lblCrDrIndicator" runat="server" Text='<%# Bind("CrDrIndicator") %>'></asp:Label></ItemTemplate> 
       </asp:TemplateField> 
       <%--<asp:BoundField DataField="CrDrIndicatorName" HeaderText="Sign" />--%> 
       <asp:TemplateField HeaderText="Sign"> 
        <ItemTemplate> 
         <asp:TextBox ID="txtgvSign" runat="server" Text='<%# Bind("CrDrIndicatorName") %>' 
          Style="background-color: Transparent; border: 0px;"> 
         </asp:TextBox> 
        </ItemTemplate> 
        <ControlStyle Width="50px" /> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText="Tax Amount"> 
        <ItemTemplate> 
         <asp:TextBox ID="txtgvTaxAmount" runat="server" Text='<%# Bind("TaxAmount") %>' Style="background-color: Transparent; 
          border: 0px;"></asp:TextBox></ItemTemplate> 
        <ControlStyle Width="75px" /> 
       </asp:TemplateField> 
       <asp:BoundField DataField="DiscountText" HeaderText="Discount Text" Visible="False" /> 
       <asp:TemplateField HeaderText="Formula Text" Visible="False"> 
        <ItemTemplate> 
         <asp:Label ID="lblFormulaText" runat="server" Text='<%# Bind("FormulaText") %>'></asp:Label></ItemTemplate> 
       </asp:TemplateField> 
       <%--<asp:BoundField DataField="TaxAmount" HeaderText="Tax Amount" />--%> 
       <asp:TemplateField Visible="False"> 
        <ItemTemplate> 
         <asp:LinkButton ID="lnkSelect" runat="server" CommandName="select" Text="select" /></ItemTemplate> 
       </asp:TemplateField> 
      </Columns> 
      <HeaderStyle ForeColor="White" /> 
      <PagerStyle CssClass="pager_style" /> 
      <RowStyle CssClass="table_evenrow" /> 
      <SelectedRowStyle CssClass="rowselect" /> 
     </asp:GridView> 
     </td> 
    </tr> 
</table>

來源

2011-06-10 thevan

發表您的標記，並解釋多一點點。 – naveen 2011-06-10 05:59:17

@naveen：我編輯了我的問題，請查看。 – thevan 2011-06-10 06:05:26

@thevan：清除gridview意味着刪除行。空的文本框或什麼？ – naveen 2011-06-10 06:41:54

試試這個。

代碼隱藏

protected void Page_Load(object sender, EventArgs e) 
{ 
    if(!IsPostBack) 
    { 
     string script = String.Format("javascript:return DeleteGridView('{0}');", gvAttribute.ClientID); 
     txtPercentage.Attributes.Add("onkeydown", script); 
    } 
}

的JavaScript

function DeleteGridView(grid_id) { 
    var grid = document.getElementById(grid_id); 
    if (grid.parentNode) { 
     grid.parentNode.removeChild(elem); 
    } 
    return false; 
}

來源

2011-06-10 07:25:08 naveen

謝謝你naveen ... – thevan 2011-06-10 07:44:53

沿着這些線應該做的伎倆。

<script> 
    $('#<%# txtPercentage.ID %>').bind("change", function(){ 
    $('#<%# gvAttribute.ID %> table tbody tr').remove(); 
    }); 
</script>

我假設你正在使用jQuery。我們需要訪問ASP.NET爲HTML節點生成的客戶端ID。

來源

2011-06-10 06:11:34

@Naffas：沒有使用JavaScript的Iam。請用JavaScript給它。 – thevan 2011-06-10 06:24:59

將網格包裝在DIV上並捕獲文本框的事件onchange。在文本onchange事件中清除DIV的innerHTML。

來源

2011-06-10 06:14:16 PSK

如何在JavaScript中刪除GridView中的所有行？

回答

相關問題