Блог

У меня есть один GridView и одно текстовое поле. Если мы введем текст в текстовое поле, я хочу очистить все строки в GridView. Как это сделать с помощью JavaScript?

При загрузке страницы я заполняю сетку из серверной части. В нем могут быть строки или нет. Но я хочу очистить 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>
  

Попробуйте это.

Код, лежащий в основе

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

что-то в этих строках должно сработать.

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

Я предполагаю, что вы используете jQuery. Нам нужен доступ к идентификатору на стороне клиента, который ASP.NET генерирует для узлов HTML.

Оберните сетку на DIV и зафиксируйте onchange событие текстового поля. Очистите innerHTML от DIV в текстовом onchange событии.