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

Question

我想使用asp.net gridview从jquery函数客户端搜索订单ID，但是jquery函数不调用，也不从网格视图搜索订单id。 任何专家都可以帮助解决我的代码中的错误以及如何解决此问题。 我共享了整个代码。

的HTML

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

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

网格视图

<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

您代码中的每个ID可能在页面上都呈现不同的颜色。

因此要在客户端JavaScript上使用它，必须渲染它，因为它将由asp.net渲染

例如，捕获文本框

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

您必须在Javascript <%=txtSearchBox%>上使用这种类型或id呈现，您的代码将类似于：

var searchKey = $('#<%=txtSearchBox.ClientID%>').val();

因此，您需要对在javascript上调用的所有控件执行相同的操作。

有关
在ASP.NET中访问控件客户端名称而不是ID
如何在外部JavaScript文件中获取asp.net客户端ID
访问javasciprt文件.js中的c＃变量

Answer 2

此Jquery选择器应返回所有td（n）对象

$("#tableBottomRight tbody tr td:nth-child(2)").each(function(){ console.log($(this).text().toLowerCase())});

检查网格的真实结构。 如果您没有任何价值您的问题是服务器端代码或Jquery库未正确加载

Answer 3

尝试将一个类添加到元素，然后将其用作示例：

$("#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> 

Answer 4

使用ClientIDMode =“ Static”，然后尝试访问脚本中的ID