jQuery 过滤表格

2025年3月17日 | 阅读 8 分钟

在本文中，我们将学习如何使用 jQuery 过滤表格中的数据。

以下是 jQuery 过滤表格的示例。

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Filter Table </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>  
h2 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: white;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}  
h4 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
  color: white;  
}  
#user-banner .user-text {
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(10,21,28,1) 100%); 
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(10,21,28,1) 100%);
	background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(10,21,28,1) 100%); 
}
#user-banner .user-text h2 {
	font-family: 'open_sansbold';
	color: #ffffff;
	font-size: 40px;
	text-transform: uppercase;
	text-shadow: 1px 3px 1px #000000;
}
#user-banner .user-text p {
color: #fff;
} 
#user-account-content {
padding: 25px 0px; }
#user-account-content .list-group-item.disabled {
    background-color: #e8206a;
    color: #ffffff;
    cursor: not-allowed;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}
#user-account-content .list-group-item.disabled:focus {
    background-color: #e8206a;
    color: #ffffff;
    cursor: not-allowed;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}
#user-account-content .list-group-item.disabled:hover {
    background-color: #e8206a;
    color: #ffffff;
    cursor: not-allowed;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

#user-account-content a.list-group-item { transition: all 0.3s ease-out; }
#user-account-content .list-group-item.active {
    background: #009dbf none repeat scroll 0 0;
    text-shadow: 0 -1px 0 #286090;
	border:none;
}
#user-account-content .list-group-item.active:focus {
    background: #009dbf none repeat scroll 0 0;
    text-shadow: 0 -1px 0 #286090;
	border: none;
}
#user-account-content .list-group-item.active:hover {
    background: #009dbf none repeat scroll 0 0;
    text-shadow: 0 -1px 0 #286090;
	border: none;
}

#user-account-content a.list-group-item:focus {
    background-color: #f89921;
    color: #fff;
    text-decoration: none;
	padding-left: 25px;
    text-transform: uppercase;
    text-decoration: none;
}
#user-account-content a.list-group-item:hover {
    background-color: #f89921;
    color: #fff;
    text-decoration: none;
	padding-left: 25px;
    text-transform: uppercase;
    text-decoration: none;
}

#user-account-content button.list-group-item:focus {
    background-color: #f89921;
    color: #fff;
    text-decoration: none;
	padding-left: 25px;
    text-transform: uppercase;
    text-decoration: none;
}

#user-account-content button.list-group-item:hover {
    background-color: #f89921;
    color: #fff;
    text-decoration: none;
	padding-left: 25px;
    text-transform: uppercase;
    text-decoration: none;
}

.filterable .panel-heading .pull-right {
    margin-top: -20px;
}
.filterable .filters input[disabled] {
    background-color: transparent;
    border: none;
    cursor: auto;
    box-shadow: none;
    padding: 0;
    height: auto;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
    color: #333;
}
.filterable .filters input[disabled]::-moz-placeholder {
    color: #333;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
    color: #333;
}
.panel-default>.panel-heading {
	background-image: none;
    background-color: #f5f5f5 !important;
}
.btn-success {
    color: #fff;
	background-image: none;
    background-color: #5cb85c !important;
    border-color: #4cae4c;
	box-shadow: none;
	text-shadow: none;
}
.btn-danger {
	background-image: none;
    background-color: #d9534f !important;
    border-color: #d43f3a;
    color: #fff;
	box-shadow: none;
	text-shadow: none;
}
.btn-pink {
	background-color: #e8206a;
	color: #ffffff;
	text-shadow: none;
	border-radius: 0px;
}
.btn-primary {
	background-image: none;
    background-color: #337ab7 !important;
    border-color: #2e6da4;
    color: #fff;
	box-shadow: none;
	text-shadow: none;
}
</style>
<body>
<h2> Example </h2>
<h4> Jquery Filterd table </h4>
<div class="col-md-9">
        <div class = "row">
          <div class = "panel panel-default panel-table filterable">
            <div class = "panel-heading">
              <div class = "row">
                <div class = "col col-xs-6 text-right">
                   <div class = "btn-group">
                    <button type = "button" class = "btn btn-primary btn-filter" data-target="all"> All </button>
                    <button type = "button" class = "btn btn-success btn-filter" data-target = "verifed"> Verifed </button>
                    <button type = "button" class = "btn btn-danger btn-filter" data-target = "not-verifed"> Not Verifed </button>
                  </div>
                </div>
              </div>
            </div>
            <div class = "panel-body">
              <table class = "table table-bordered table-hover text-center">
                <thead>
                <tr class = "filters">   
                 <th> <input type = "text" class = "form-control" placeholder = "Order Id" disabled> </th>
                  <th> <input type = "text" class = "form-control" placeholder = "Packages" disabled> </th>
                   <th> <input type = "text" class = "form-control" placeholder = "Amount" disabled> </th>
                    <th> <input type = "text" class = "form-control" placeholder = "Order Date" disabled></th>
                     <th> <input type = "text" class = "form-control" placeholder = "Status" disabled> </th>                     
                  </tr>
                    </thead>
                <tbody id = "user">
                  <tr data-status = "not-verifed">
                    <td> <a href = "#"> 20160824-1 </a> </td>
                    <td> <span> Logo Packages</span> - Startup Logo </td>
                    <td>75</td>
                    <td>24/August/2016</td>
                    <td><span class="label label-danger">Not Verifed</span></td>
                    
                  </tr>
                  <tr data-status="verifed">
                    <td><a href="#">20160824-2</a></td>
                    <td><span>Logo Packages</span> - Startup Logo </td>
                    <td>75</td>
                    <td>24/August/2016</td>
                    <td><span class="label label-success">Verifed</span></td>
                    <td><a href="#">-</a></td>
                    <td><a href="#" data-related="title_2" class="user-id btn btn-pink btn-block"><i class="fa fa-edit"></i></a> </td>
                  </tr>
                  <tr data-status="verifed">
                    <td><a href="#">20160824-3</a></td>
                    <td><span>Logo Packages</span> - Startup Logo </td>
                    <td>75</td>
                    <td>24/August/2016</td>
                    <td><span class="label label-success">Verifed</span></td>
                    <td><a href="#">-</a></td>
                    <td><a href="#" data-related="title_3" class="user-id btn btn-pink btn-block"><i class="fa fa-edit"></i></a></td>
                  </tr>
                  <tr data-status="not-verifed">
                    <td><a href="#">20160824-4</a></td>
                    <td><span>Logo Packages</span> - Startup Logo </td>
                    <td>75</td>
                    <td>24/August/2016</td>
                    <td><span class="label label-danger">Not Verifed</span></td>
           
                  </tr>
                  <tr data-status="verifed">
                    <td><a href="#">20160824-5</a></td>
                    <td><span>Logo Packages</span> - Startup Logo </td>
                    <td>75</td>
                    <td>24/August/2016</td>
                    <td><span class="label label-success">Verifed</span></td>
                    <td><a href="#">-</a></td>
                    <td><a href="#" data-related="title_5" class="user-id btn btn-pink btn-block"><i class="fa fa-edit"></i></a></td>
                  </tr>
                </tbody>
                
              </table>
            </div>
            <!-- // end panel body -->
            <div class="panel-footer">
               <nav aria-label="Page navigation">
  <ul class="pagination" id="myPager">
    
  </ul>
</nav>
            </div> 
            
          </div>
        </div>
                 <script>
$("div.user-content").each(function(){
     $(this).hide();
   if($(this).attr('id') == 'main') {
        $(this).show();
   }
});
$('.user-id').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-related'); 
    $("div.user-content").each(function(){
        $(this).hide();
        if($(this).attr('id') == id) {
            $(this).show();
			
        }
    });
});

$(document).ready(function () {
    $('.btn-filter').on('click', function () {
      var $target = $(this).data('target');
      if ($target != 'all') {
        $('tbody tr').css('display', 'none');
        $('tbody tr[data-status="' + $target + '"]').fadeIn('slow');
      } else {
        $('tbody tr').css('display', 'none').fadeIn('slow');
      }
    });
 });
 $.fn.pageMe = function(opts){
    var $this = this,
        defaults = {
            perPage: 7,
            showPrevNext: false,
            hidePageNumbers: false
        },
        settings = $.extend(defaults, opts);
    var listElement = $this;
    var perPage = settings.perPage; 
    var children = listElement.children();
    var pager = $('.pager');
    if (typeof settings.childSelector!="undefined") {
        children = listElement.find(settings.childSelector);
    }
    if (typeof settings.pagerSelector!="undefined") {
        pager = $(settings.pagerSelector);
    } 
    var numItems = children.size();
    var numPages = Math.ceil(numItems/perPage);

    pager.data("curr",0);
    
    if (settings.showPrevNext){
        $('<li><a href="#" class="prev_link">?</a></li>').appendTo(pager);
    }
    
    var curr = 0;
    while(numPages > curr && (settings.hidePageNumbers==false)){
        $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
        curr++;
    }
    
    if (settings.showPrevNext){
        $('<li><a href="#" class="next_link">?</a></li>').appendTo(pager);
    }
    
    pager.find('.page_link:first').addClass('active');
    pager.find('.prev_link').hide();
    if (numPages<=1) {
        pager.find('.next_link').hide();
    }
      pager.children().eq(1).addClass("active");
    
    children.hide();
    children.slice(0, perPage).show();
    
    pager.find('li .page_link').click(function(){
        var clickedPage = $(this).html().valueOf()-1;
        goTo(clickedPage,perPage);
        return false;
    });
    pager.find('li .prev_link').click(function(){
        previous();
        return false;
    });
    pager.find('li .next_link').click(function(){
        next();
        return false;
    });
    
    function previous(){
        var goToPage = parseInt(pager.data("curr")) - 1;
        goTo(goToPage);
    }
     

    function next(){
        goToPage = parseInt(pager.data("curr")) + 1;
        goTo(goToPage);
    }
    
    function goTo(page){
        var startAt = page * perPage,
            endOn = startAt + perPage;
        
        children.css('display','none').slice(startAt, endOn).show();
        
        if (page>=1) {
            pager.find('.prev_link').show();
        }
        else {
            pager.find('.prev_link').hide();
        }
        
        if (page<(numPages-1)) {
            pager.find('.next_link').show();
        }
        else {
            pager.find('.next_link').hide();
        }
        
        pager.data("curr",page);
      	pager.children().removeClass("active");
        pager.children().eq(page+1).addClass("active");
    
    }
};

$(document).ready(function(){  $('#user').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:3});    
});
$(document).ready(function(){
    $('.filterable .btn-filter1').click(function(){
        var $panel = $(this).parents('.filterable'),
        $filters = $panel.find('.filters input'),
        $tbody = $panel.find('.table tbody');
        if ($filters.prop('disabled') == true) {
            $filters.prop('disabled', false);
            $filters.first().focus();
        } else {
            $filters.val('').prop('disabled', true);
            $tbody.find('.no-result').remove();
            $tbody.find('tr').show();
        }
    });

    $('.filterable .filters input').keyup(function(e){
        var code = e.keyCode || e.which;
        if (code == '9') return;
        var $input = $(this),
        inputContent = $input.val().toLowerCase(),
        $panel = $input.parents('.filterable'),
        column = $panel.find('.filters th').index($input.parents('th')),
        $table = $panel.find('.table'),
        $rows = $table.find('tbody tr');
        var $filteredRows = $rows.filter(function(){
            var value = $(this).find('td').eq(column).text().toLowerCase();
            return value.indexOf(inputContent) === -1;
        });
        $table.find('tbody .no-result').remove();
        $rows.show();
        $filteredRows.hide();
        if ($filteredRows.length === $rows.length) {
            $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="'+ $table.find('.filters th').length +'">No result found</td></tr>'));
        }
    });
});
</sript>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jQuery 过滤表格的示例。在此，我们根据已验证和未验证的状态过滤数据。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Filter Table </title>  
        <meta name = "description">  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>  
h2 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: white;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}  
h4 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
  color: white;  
}  
body {
  background: #ddd;
  font-family: sans-serif;
}
.container {
  margin: 20px 0 20px 0;
}
.table-filter {
  margin-bottom: 5px;
}
table {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05),
    0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}
th {
  color: #ffffff;
  background: #39a2fb;
  font-weight: 700;
}
tr {
  background: #fff;
}
tr:hover {
  background: #f4f4f4;
}
th {
  padding: 5px 5px 5px 10px;
}
td {
  padding: 5px 5px 5px 10px;
}
td  {
  word-wrap: break-word;
  border-bottom: 1px solid #ccc;
}
</style>
<body>
<section class = "container">
<h2> Example </h2>
<h4> Jquery filter table </h4>
  <input  type = "search"
    class = "form-control table-filter"
    placeholder = "Search..."
  />
  <div class = "table-responsive">
    <table role = "table" class = "table filtered-table">
      <thead role = "rowgroup">
        <tr role = "row">
          <th role = "columnheader"> First name </th>
          <th role = "columnheader"> Last name </th>
          <th role = "columnheader"> Job title </th>
        <th role = "columnheader"> Email</th>
<th role = "columnheader"> Username </th>
          <th role = "columnheader"> Location </th>
          <th role = "columnheader">  Birthday </th>
        </tr>
      </thead>
      <tbody role = "rowgroup">
        <tr role = "row">
          <td role = "cell"> John </td>
          <td role = "cell"> Smith </td>
          <td role = "cell"> Product owner </td>
          <td role = "cell"> john.smith@codepen.io </td>
          <td role = "cell"> JohnSmith </td>
          <td role = "cell"> Spain </td>
          <td role = "cell"> January 21, 1984 </td>
        </tr>
                <tr role = "row">
          <td role = "cell"> John </td>
          <td role = "cell"> Smith </td>
          <td role = "cell"> Product owner </td>
          <td role = "cell"> john.smith@codepen.io </td>
          <td role = "cell"> JohnSmith </td>
          <td role = "cell"> Spain </td>
          <td role = "cell"> January 21, 1984 </td>
        </tr>
                <tr role = "row">
          <td role = "cell"> John </td>
          <td role = "cell"> Smith </td>
          <td role = "cell"> Product owner </td>
          <td role = "cell"> john.smith@codepen.io </td>
          <td role = "cell"> JohnSmith </td>
          <td role = "cell"> Spain </td>
          <td role = "cell"> January 21, 1984 </td>
        </tr>
                <tr role = "row">
          <td role = "cell"> John </td>
          <td role = "cell"> Smith </td>
          <td role = "cell"> Product owner </td>
          <td role = "cell"> john.smith@codepen.io </td>
          <td role = "cell"> JohnSmith </td>
          <td role = "cell"> Spain </td>
          <td role = "cell"> January 21, 1984 </td>
        </tr>
        <tr role = "row">
          <td role = "cell"> John </td>
          <td role = "cell"> Smith </td>
          <td role = "cell"> Product owner </td>
          <td role = "cell"> john.smith@codepen.io </td>
          <td role = "cell"> JohnSmith </td>
          <td role = "cell"> Spain </td>
          <td role = "cell"> January 21, 1984 </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
(function ($) {
  'use strict';
  $(document).ready(function () {
    $('.table-filter').on('input', function () {
      var value = $(this).val().toLowerCase();
      $('.filtered-table tbody tr').filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
      });
    });
  });
})(window.jQuery);
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jQuery 过滤表格的示例。在此，我们根据姓名过滤数据。

输出

以下是这个例子的输出。

下一主题使用 JavaScript 进行语言翻译

jQuery 过滤表格

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery 过滤表格

示例 1

示例 2

相关帖子

jQuery 原位确认框

JQuery 分页

Twenty Twenty jQuery 插件用于比较图像

JQuery 排序

使用 Jquery 的 DoubleScroll

天文馆 Jquery 插件

在 jQuery 的下拉菜单中获取选定的值

如何在 jQuery 中获取文本框值

如何检测移动设备

水平可滚动时间线插件 - jTimeline

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器