Как создать раскрывающийся список фильтра для таблицы с помощью jQuery?

Я хочу сделать выпадающий фильтр таблицы в специальных колонках, например, я хочу, чтобы сделать фильтр для «замужней» Колонка & выбрать да или или нет из выпадающего списка, это мой стол:Как создать раскрывающийся список фильтра для таблицы с помощью jQuery?

this is want I want

Мне нужен код jquery, чтобы помочь мне создать фильтр.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<table id="table_format" class="table table-bordered table-striped table-hover table-list-search"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Maried</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="myTable"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>yes</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>3</td> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>no</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>yes</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>no</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>no</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="js/filter.js"></script>

источник

2016-03-03 BBJ

Попробуйте это - использует регулярное выражение и JQuery фильтра функцию для фильтрации результатов на основе выбора списка OnChange (используя дополнительный класс В для управления дисплеем). Это также можно использовать в текстовой вводной версии для фильтрации любого из строк таблицы для любого содержимого, чтобы вы могли вводить имена людей и т. Д. И получать функцию фильтра для отображения только совпадающих имен.

Я также поставил параметр «все», чтобы показать все tr снова (эффективно удалить фильтр). Обратите внимание, что он просто скрывает несогласованные строки, что означает, что полосатый аспект таблицы не обязательно будет отображаться по желанию, но когда я реализовал что-то вроде этого - я также добавил функцию, которая переформатировала таблицу на основе количества строки и нечетные/четные и т. д. ПОСЛЕ того, как фильтр был применен, тем самым перебирая отображение таблицы.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Filter</title> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
\t <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
</head> 
 
<body> 
 
    <table id="table_format" class="table table-bordered table-striped table-hover table-list-search"> 
 
        <thead> 
 
         <tr> 
 
          <th>#</th> 
 
          <th>First Name</th> 
 
          <th>Last Name</th> 
 
          <th>Married 
 
\t \t \t \t \t \t \t <select id='filterText' style='display:inline-block' onchange='filterText()'> 
 
\t \t \t \t \t \t \t \t <option disabled selected>Select</option> 
 
\t \t \t \t \t \t \t \t <option value='yes'>Yes</option> 
 
\t \t \t \t \t \t \t \t <option value='no'>No</option> 
 
\t \t \t \t \t \t \t \t <option value='all'>All</option> 
 
\t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t </th> 
 
         </tr> 
 
        </thead> 
 
        <tbody id="myTable"> 
 
         <tr class="content"> 
 
          <td>1</td> 
 
          <td>Mark</td> 
 
          <td>Otto</td> 
 
          <td>yes</td> 
 
         </tr> 
 
         
 
         <tr class="content"> 
 
          <td>3</td> 
 
          <td>Larry</td> 
 
          <td>the Bird</td> 
 
          <td>no</td> 
 
         </tr> 
 
         <tr class="content"> 
 
          <td>1</td> 
 
          <td>Mark</td> 
 
          <td>Otto</td> 
 
          <td>yes</td> 
 
         </tr> 
 
         <tr class="content"> 
 
          <td>2</td> 
 
          <td>Jacob</td> 
 
          <td>Thornton</td> 
 
          <td>no</td> 
 
         </tr> 
 
         <tr class="content"> 
 
          <td>3</td> 
 
          <td>Larry</td> 
 
          <td>the Bird</td> 
 
          <td>no</td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<script> 
 
function filterText() 
 
\t { 
 
\t \t var rex = new RegExp($('#filterText').val()); 
 
\t \t if(rex =="/all/"){clearFilter()}else{ 
 
\t \t \t $('.content').hide(); 
 
\t \t \t $('.content').filter(function() { 
 
\t \t \t return rex.test($(this).text()); 
 
\t \t \t }).show(); 
 
\t } 
 
\t } 
 
\t 
 
function clearFilter() 
 
\t { 
 
\t \t $('.filterText').val(''); 
 
\t \t $('.content').show(); 
 
\t } 
 
</script> 
 
</body> 
 
</html>

источник

2016-03-03 12:08:44 gavgrif

спасибо брат, вот что я хочу – BBJ

где вы использовали filtertext в качестве класса clearFilter() –

Как создать раскрывающийся список фильтра для таблицы с помощью jQuery?

ответ

Смежные вопросы