使用Javascript過濾GridView

Question

我在Javascript中有一個函數，它可以在我的GridView中生成過濾器。 但是，這個函數按列來過濾，也就是說我需要在我的GridView的每一列有一個「輸入」來過濾所有的GridView。 如何讓這個函數適應所有GridView列的「輸入」？我已經適應了這個功能。最初，它獲取的值不是在GrdiView中的「table」中，但現在對於這種情況我沒有看到任何解決方案。我很清楚？

My功能：

$(function() { 
$("#tabela input").keyup(function() { 
    var index = $(this).parent().index(); 
    var nth = "#GridView1 td:nth-child(" + (index + 1).toString() + ")"; 
    var valor = $(this).val().toUpperCase(); 
    $("#GridView1 tbody tr").show(); 
    $(nth).each(function() { 
     if ($(this).text().toUpperCase().indexOf(valor) < 0) { 
      $(this).parent().hide(); 
     } 
    }); 
}); 

$("#tabela input").blur(function() { 
    $(this).val(""); 
}); 

}）;

我的GridView：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" GridLines="None" 
      CssClass="table table-bordered table-striped"> 
      <Columns> 
       <asp:BoundField DataField="idTickets" HeaderText="ID" /> 
       <asp:BoundField DataField="UserName" HeaderText="User" /> 
       <asp:BoundField DataField="AccessGroup" HeaderText="Access Group" /> 
       <asp:BoundField DataField="FolderAccess" HeaderText="Folder Access" /> 
       <asp:BoundField DataField="RequestDate" HeaderText="Request Date" DataFormatString="{0:d}" /> 
       <asp:BoundField DataField="SituationDesc" HeaderText="Situation" /> 
       <asp:BoundField DataField="Approver" HeaderText="Approver" /> 
       <asp:BoundField DataField="ApprovalDate" HeaderText="Approval Date" DataFormatString="{0:d}" /> 
       <asp:BoundField DataField="BusinessJustification" HeaderText="Business Justification" /> 
       <asp:BoundField DataField="Server" HeaderText="Server Name" /> 
       <asp:BoundField DataField="UserRequestor" HeaderText="User Request" /> 
       <asp:TemplateField Visible="false"> 
        <ItemTemplate> 
         <asp:HiddenField ID="Access" runat="server" Value='<%# Bind("Access") %>' /> 
        </ItemTemplate> 
       </asp:TemplateField> 
      </Columns> 
     </asp:GridView> 

要篩選3個列，我需要3個輸入：

<table id="tabela"> 
      <thead> 
       <tr> 
        <th> 
         ID 
        </th> 
        <th> 
         USER 
        </th> 
        <th> 
         Access Group 
        </th> 
       </tr> 
       <tr> 
        <th> 
         <input type="text" id="txtColuna1" /> 
        </th> 
        <th> 
         <input type="text" id="txtColuna2" /> 
        </th> 
        <th> 
         <input type="text" id="txtColuna3" /> 
        </th> 
       </tr> 
      </thead> 
     </table> 

Answer 1

如果我正確理解你的問題，您正在尋找這樣的事情：

$(function(){ 
    $('#tabela input').keyup(function(){ 
     var val = $(this).val().toUpperCase(); 
     $('#GridView1> tbody > tr').each(function(index , element){ 
      if($(this).text().toUpperCase().indexOf(val)<0) 
       $(this).hide(); 
      else 
       $(this).show(); 
     }); 
    }); 
}); 

本質上，它迭代通過網格中的行尋找匹配，隱藏/顯示行相應。

在tabela內部設置了標記，你可以簡單地有一個文本輸入，而不是3

Here's a quick demo.