如何在 JavaScript 中从 GridView 中删除所有行？

How to remove all the rows from GridView in JavaScript?

提问by thevan

I have One GridView and One TextBox. If We enter the text in the TextBox, I want to clear all the Rows in the GridView. How to do this using JavaScript?

我有一个 GridView 和一个 TextBox。如果我们在TextBox中输入文本，我想清除GridView中的所有行。如何使用 JavaScript 做到这一点？

In the Page Load I fill the Grid from the BackEnd. It may have rows or not. But I want to clear the GridView when I enter the text in the TextBox.

在页面加载中，我从后端填充网格。它可能有或没有行。但是我想在 TextBox 中输入文本时清除 GridView。

Here is my Source Code.

这是我的源代码。

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

回答by Babak Naffas

something along these lines should do the trick.

沿着这些路线的东西应该可以解决问题。

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

I'm assuming you are using jQuery. We need access to the client side ID that ASP.NET generates for the HTML nodes.

我假设您正在使用 jQuery。我们需要访问 ASP.NET 为 HTML 节点生成的客户端 ID。

回答by PSK

Wrap the grid on a DIVand capture onchangeevent of the textbox. Clear the innerHTMLof the DIV in the text onchangeevent.

将网格包裹在文本框的aDIV和捕获onchange事件上。清除innerHTML文本onchange事件中的 DIV 。

回答by naveen

Try this.

试试这个。

Code-behind

代码隐藏

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

JavaScript

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