javascript - 使用来自 asp.net gridview 函数的 jquery 的客户端搜索文本框不起作用

Question

我想使用asp.net gridview从jquery函数客户端搜索订单id，但jquery函数不调用也不从 GridView 搜索订单id。任何专家都可以帮助我的代码出了什么问题，以及如何解决这个问题。我已经分享了整个代码。

HTML

  <asp:TextBox ID="txtSearchBox" runat="server"></asp:TextBox>

  <asp:Button ID="Button1" runat="server" Text="Search" />

GridView

<asp:Panel ID="Panel1" ScrollBars="Vertical" Height="500px" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowHeaderWhenEmpty="true" Width="100%"
                        BorderColor ="#DEDFDE" BorderStyle="Ridge" BorderWidth="1px" CellPadding="4" 
                        Font-Size="Small" ForeColor="Black" GridLines="Vertical"
                        OnRowDataBound="GridView1_RowDataBound" OnDataBound="OnDataBound"
                        CssClass="table table-responsive table-striped table-hover" EmptyDataText="No Record Found..." RowStyle-Height="7px">

                <Columns>

                    <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" HeaderStyle-Width="40px">

                    <asp:boundfield datafield="OrderID" headertext="OrderID"/>

                    <%--<asp:CommandField ShowEditButton="True" ItemStyle-HorizontalAlign="Center"/>
                    <asp:CommandField ShowDeleteButton="True"  ItemStyle-HorizontalAlign="Center" />--%>
                </Columns>

                <EmptyDataRowStyle Width="1195px" HorizontalAlign="Center" BackColor="#C2D69B" />
                <RowStyle BackColor="#F7F7DE" />
                <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                <HeaderStyle Height="10px" VerticalAlign="Middle" BackColor="#6B696B" CssClass="tb_font" ForeColor="White" />
                <AlternatingRowStyle BackColor="White" />
            </asp:GridView>
        </asp:Panel>

jquery函数

<script type="text/javascript">
$(document).ready(function() {

      $('#Button1').click(function(event) {
         event.preventDefault();
         var searchKey = $('#txtSearchBox').val();
         $("#GridView1 tr td:nth-child(2)").each(function() {
            var cellText = $(this).text().toLowerCase();
            if (cellText.indexOf(searchKey) >= 0) {
                  $(this).parent().show();
            }
            else {
                $(this).parent().hide();
            }
          });
       });
});
</script>

Answer 1

尝试向元素添加一个类，然后使用它例如:

$("#GridView1").find('tbody').find('.class-on-element').each(function() {

$(function() {
  $('#Button1').on('click', function(event) {
    event.preventDefault();
    var searchKey = $('#txtSearchBox').val();
    $("#GridView1").find('.class-on-element').each(function() {
      //may not need toLowerCase
      var textMatch = ($(this).text().toLowerCase().indexOf(searchKey) >= 0);
      $(this).closest('tr').toggle(textMatch);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>