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

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

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

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

例如，捕获文本框

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

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

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

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

相关
Accessing control client name and not ID in ASP.NET
How to get asp.net client id at external javascript file
access c# variable in javasciprt file .js

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

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

4 个答案: