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

Question

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

在页面加载中，我从后端填充网格。它可能有行，也可能没有。但我想在 TextBox 中输入文本时清除 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>

Answer 1

试试这个。

代码隐藏

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

Answer 2

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

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

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

Answer 3

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