Фильтр и поиск в таблице

250

24 марта 2019, 03:40

необходим поиск и фильтрация по таблице. При работе возникают следующие проблеммы:

Фильтрует только после второго выбора в select.
При фильтрации пропадает поле фильтрации
Фильтрует только по первым двум полям (группа, специальность), по полю проект удаляет все записи
Поиск осуществляется так же по превым двум полям, по полю проект не ищет

подскажите как исправить, в каком направление двигаться

Спасибо!

       $(".sel").change(function() { 
 
         var tab = document.querySelector('#mytable'), 
           tr = tab.querySelectorAll('tr:nth-child(n+1)'), 
           sel = tab.querySelectorAll('.sel'), 
           arr = [], 
           res = document.querySelector('.res'); 
         Array.prototype.forEach.call(sel, function(a, b) { 
           arr[b] = a.value; 
           a.onchange = function() { 
             arr[b] = a.value; 
             a.options[0].selected = !0; 
             Array.prototype.forEach.call(tr, function(a, b) { 
               var c = Array.prototype.every.call(a.querySelectorAll("td"), function(a, b) { 
                 return RegExp(arr[b]).test(a.textContent) 
               }); 
               a.style.display = c ? "" : "none" 
             }) 
           } 
         }); 
         res.onclick = function() { 
           for (var i = 0; i < sel.length; i++) { 
             sel[i].onchange() 
           } 
         } 
       }); 
        
$("#search").keyup(function(){ 
    _this = this; 
     
    $.each($("#mytable tbody tr"), function() { 
        if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) { 
            $(this).hide(); 
        } else { 
            $(this).show();    
            } 
        }); 
    });

TABLE { 
  width: 300px; 
  /* Ширина таблицы */ 
  border-collapse: collapse; 
  /* Убираем двойные линии между ячейками */ 
} 
 
TD, 
TH { 
  padding: 3px; 
  /* Поля вокруг содержимого таблицы */ 
  border: 1px solid black; 
  /* Параметры рамки */ 
} 
 
TH { 
  background: #b0e0e6; 
  /* Цвет фона */ 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" class="form-control pull-right" id="search" placeholder="Поиск по таблице"> 
<table id="mytable" class="table align-items-center table-flush"> 
  <tr> 
    <td> 
 
    </td> 
    <td> 
      <select class="sel"> 
                <option value="">-- Выбрать --</option> 
                    <option value="">Все наименования</option> 
                    <option value="ЭУ-244">ЭУ-244</option> 
                    <option value="ЭУ-317">ЭУ-317</option> 
                    <option value="ЭУ-131">ЭУ-131</option> 
                    </select> 
    </td> 
    <td> 
      <select class="sel"> 
                    <option value="">-- Выбрать --</option> 
                    <option value="">Все наименования</option> 
                    <option value="Бизнес-информатика">Бизнес-информатика</option> 
                    <option value="Прикладная математика">Прикладная математика</option> 
                   </select> 
    </td> 
    <td> 
      <select class="sel"> 
                    <option value="">-- Выбрать --</option> 
                    <option value="">Все наименования</option> 
 
                    <option value="Загрузил">загрузил</option> 
                    <option value="Не загрузил">не загрузил</option> 
                </select> 
    </td> 
 
  </tr> 
  <thead class="thead-light"> 
    <th scope="col">ФИО</th> 
    <th scope="col">Группа</th> 
    <th scope="col">Специальность</th> 
    <th scope="col">Проект</th> 
    <th scope="col">Задолженость</th> 
    <th scope="col">Статус</th> 
    <th scope="col">Действие</th> 
  </thead> 
  <tbody> 
    <tr id="8" class="id2"> 
      <th scope="row"> 
        <div class="media align-items-center"> 
          Алексеев Семен Иванович 
          <div class="media-body"> 
            <span class="mb-0 text-sm"></span> 
          </div> 
        </div> 
      </th> 
      <td>ЭУ-244</td> 
      <td>Бизнес-информатика</td> 
      <td> 
        не загрузил 
      </td> 
      <td> 
        <div class="d-flex align-items-center"> 
          <span class="mr-2">4</span> 
 
        </div> 
      </td> 
      <td id="8"> 
        <div class="avatar-group"> 
          <span id="bg_'.$resul->ID.'" class="badge badge-dot mr-4"> не подтвержден </span> 
 
        </div> 
      </td> 
      <td class="text-right"> 
        <div class="dropdown"> 
          <a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          <i class="fas fa-ellipsis-v"></i> 
                        </a> 
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> 
            <a class="dropdown-item">Подтвердить</a> 
            <a class="dropdown-item" id="ot">Отказать</a> 
 
          </div> 
        </div> 
      </td> 
    </tr> 
    <tr id="12" class="id2"> 
      <th scope="row"> 
        <div class="media align-items-center"> 
          Иванов иван Петрович 
          <div class="media-body"> 
            <span class="mb-0 text-sm"></span> 
          </div> 
        </div> 
      </th> 
      <td>ЭУ-317</td> 
      <td>Бизнес-информатика</td> 
      <td>не загрузил</td> 
      <td> 
        <div class="d-flex align-items-center"> 
          <span class="mr-2">2</span> 
 
        </div> 
      </td> 
      <td id="12"> 
        <div class="avatar-group"> 
          <span id="bg_'.$resul->ID.'" class="badge badge-dot mr-4"> подтвержден </span> 
 
        </div> 
      </td> 
      <td class="text-right"> 
        <div class="dropdown"> 
          <a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          <i class="fas fa-ellipsis-v"></i> 
                        </a> 
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> 
            <a class="dropdown-item">Подтвердить</a> 
            <a class="dropdown-item" id="ot">Отказать</a> 
 
          </div> 
        </div> 
      </td> 
    </tr> 
    <tr id="24" class="id2"> 
      <th scope="row"> 
        <div class="media align-items-center"> 
          Кузин Илья Владимирович 
          <div class="media-body"> 
            <span class="mb-0 text-sm"></span> 
          </div> 
        </div> 
      </th> 
      <td>ЭУ-244</td> 
      <td>Прикладная математика</td> 
      <td> 
        загрузил 
      </td> 
      <td> 
        <div class="d-flex align-items-center"> 
          <span class="mr-2">0</span> 
 
        </div> 
      </td> 
      <td id="24"> 
        <div class="avatar-group"> 
          <span id="bg_'.$resul->ID.'" class="badge badge-dot mr-4">не подтвержден </span> 
 
        </div> 
      </td> 
      <td class="text-right"> 
        <div class="dropdown"> 
          <a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          <i class="fas fa-ellipsis-v"></i> 
                        </a> 
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> 
            <a class="dropdown-item">Подтвердить</a> 
            <a class="dropdown-item" id="ot">Отказать</a> 
 
          </div> 
        </div> 
      </td> 
    </tr> 
    <tr id="8" class="id2"> 
      <th scope="row"> 
        <div class="media align-items-center"> 
          Малышенок Артем Сергеевич 
          <div class="media-body"> 
            <span class="mb-0 text-sm"></span> 
          </div> 
        </div> 
      </th> 
      <td>ЭУ-131</td> 
      <td>Прикладная математика</td> 
      <td> 
        не загрузил 
      </td> 
      <td> 
        <div class="d-flex align-items-center"> 
          <span class="mr-2">0</span> 
 
        </div> 
      </td> 
      <td id="conf'.$resul->ID.'"> 
        <div class="avatar-group"> 
          <span id="bg_'.$resul->ID.'" class="badge badge-dot mr-4">не подтвержден </span> 
 
        </div> 
      </td> 
      <td class="text-right"> 
        <div class="dropdown"> 
          <a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          <i class="fas fa-ellipsis-v"></i> 
                        </a> 
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> 
            <a class="dropdown-item">Подтвердить</a> 
            <a class="dropdown-item" id="ot">Отказать</a> 
 
          </div> 
        </div> 
      </td> 
    </tr> 
  </tbody> 
</table> 
<input type="button" value="reset" class="res" />

Answer 1

решил следующим образом, заменил "загрузил"->"добавил" select перенес в <thead></thead> Но проблему с первым выбором так и не решил

$(".sel").change(function() { 
  var tab = document.querySelector("#mytable"), 
    tr = tab.querySelectorAll("tr:nth-child(n+1)"), 
    sel = tab.querySelectorAll(".sel"), 
    arr = [], 
    res = document.querySelector(".res"); 
  Array.prototype.forEach.call(sel, function(a, b) { 
    arr[b] = a.value; 
    a.onchange = function() { 
      arr[b] = a.value; 
      a.options[0].selected = !0; 
      Array.prototype.forEach.call(tr, function(a, b) { 
        var c = Array.prototype.every.call(a.querySelectorAll("td"), function( 
          a, 
          b 
        ) { 
          return RegExp(arr[b]).test(a.textContent); 
        }); 
        a.style.display = c ? "" : "none"; 
      }); 
    }; 
  }); 
  res.onclick = function() { 
    for (var i = 0; i < sel.length; i++) { 
      sel[i].onchange(); 
    } 
  }; 
}); 
 
$("#search").keyup(function() { 
  _this = this; 
 
  $.each($("#mytable tbody tr"), function() { 
    if ( 
      $(this) 
        .text() 
        .toLowerCase() 
        .indexOf( 
          $(_this) 
            .val() 
            .toLowerCase() 
        ) === -1 
    ) { 
      $(this).hide(); 
    } else { 
      $(this).show(); 
    } 
  }); 
});

TABLE { 
  width: 300px; 
  /* Ширина таблицы */ 
  border-collapse: collapse; 
  /* Убираем двойные линии между ячейками */ 
} 
 
TD, 
TH { 
  padding: 3px; 
  /* Поля вокруг содержимого таблицы */ 
  border: 1px solid black; 
  /* Параметры рамки */ 
} 
 
TH { 
  background: #b0e0e6; 
  /* Цвет фона */ 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" class="form-control pull-right" id="search" placeholder="Поиск по таблице"> 
<table id="mytable" class="table align-items-center table-flush"> 
 
  <thead class="thead-light"> 
    <th scope="col">ФИО</th> 
    <th scope="col">Группа</th> 
    <th scope="col">Специальность</th> 
    <th scope="col">Проект</th> 
    <th scope="col">Задолженость</th> 
    <th scope="col">Статус</th> 
    <th scope="col">Действие</th> 
  </thead> 
  <thead class="thead-light"> 
 
<th></th> 
   <th> 
     
      <select class="sel"> 
                <option value="">-- Выбрать --</option> 
                    <option value="">Все наименования</option> 
                    <option value="ЭУ-244">ЭУ-244</option> 
                    <option value="ЭУ-317">ЭУ-317</option> 
                    <option value="ЭУ-131">ЭУ-131</option> 
                    </select> 
 
  </th> 
 
<th> 
    
                  <select class="sel"> 
                    <option value="">-- Выбрать --</option> 
                    <option value="">Все наименования</option> 
                    <option value="Бизнес-информатика">Бизнес-информатика</option> 
                    <option value="Прикладная математика">Прикладная математика</option> 
                   </select> 
    
  </th> 
  
  <th> 
 
      <select class="sel"> 
                    <option value="">-- Выбрать --</option> 
                    <option value="">Все наименования</option> 
                    <option value="добавил">добавил</option> 
                    <option value="не_загрузил">не_загрузил</option> 
              </select> 
 
     
  </th>   
   </th> 
   <th> 
      </th> 
   <th> 
      </th> 
   <th> 
  </th> 
 
</thead> 
  <tbody> 
    <tr id="8" class="id2"> 
      <th scope="row"> 
        <div class="media align-items-center"> 
          Алексеев Семен Иванович 
          <div class="media-body"> 
            <span class="mb-0 text-sm"></span> 
          </div> 
        </div> 
      </th> 
      <td>ЭУ-244</td> 
      <td>Бизнес-информатика</td> 
      <td> 
        не_загрузил 
      </td> 
      <td> 
        <div class="d-flex align-items-center"> 
          <span class="mr-2">4</span> 
 
        </div> 
      </td> 
      <td id="8"> 
        <div class="avatar-group"> 
          <span id="bg_'.$resul->ID.'" class="badge badge-dot mr-4"> не подтвержден </span> 
 
        </div> 
      </td> 
      <td class="text-right"> 
        <div class="dropdown"> 
          <a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          <i class="fas fa-ellipsis-v"></i> 
                        </a> 
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> 
            <a class="dropdown-item">Подтвердить</a> 
            <a class="dropdown-item" id="ot">Отказать</a> 
 
          </div> 
        </div> 
      </td> 
    </tr> 
    <tr id="12" class="id2"> 
      <th scope="row"> 
        <div class="media align-items-center"> 
          Иванов иван Петрович 
          <div class="media-body"> 
            <span class="mb-0 text-sm"></span> 
          </div> 
        </div> 
      </th> 
      <td>ЭУ-317</td> 
      <td>Бизнес-информатика</td> 
      <td>не_загрузил</td> 
      <td> 
        <div class="d-flex align-items-center"> 
          <span class="mr-2">2</span> 
 
        </div> 
      </td> 
      <td id="12"> 
        <div class="avatar-group"> 
          <span id="bg_'.$resul->ID.'" class="badge badge-dot mr-4"> подтвержден </span> 
 
        </div> 
      </td> 
      <td class="text-right"> 
        <div class="dropdown"> 
          <a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          <i class="fas fa-ellipsis-v"></i> 
                        </a> 
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> 
            <a class="dropdown-item">Подтвердить</a> 
            <a class="dropdown-item" id="ot">Отказать</a> 
 
          </div> 
        </div> 
      </td> 
    </tr> 
    <tr id="24" class="id2"> 
      <th scope="row"> 
        <div class="media align-items-center"> 
          Кузин Илья Владимирович 
          <div class="media-body"> 
            <span class="mb-0 text-sm"></span> 
          </div> 
        </div> 
      </th> 
      <td>ЭУ-244</td> 
      <td>Прикладная математика</td> 
      <td> 
        добавил 
      </td> 
      <td> 
        <div class="d-flex align-items-center"> 
          <span class="mr-2">0</span> 
 
        </div> 
      </td> 
      <td id="24"> 
        <div class="avatar-group"> 
          <span id="bg_'.$resul->ID.'" class="badge badge-dot mr-4">не подтвержден </span> 
 
        </div> 
      </td> 
      <td class="text-right"> 
        <div class="dropdown"> 
          <a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          <i class="fas fa-ellipsis-v"></i> 
                        </a> 
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> 
            <a class="dropdown-item">Подтвердить</a> 
            <a class="dropdown-item" id="ot">Отказать</a> 
 
          </div> 
        </div> 
      </td> 
    </tr> 
    <tr id="8" class="id2"> 
      <th scope="row"> 
        <div class="media align-items-center"> 
          Малышенок Артем Сергеевич 
          <div class="media-body"> 
            <span class="mb-0 text-sm"></span> 
          </div> 
        </div> 
      </th> 
      <td>ЭУ-131</td> 
      <td>Прикладная математика</td> 
      <td> 
        не_загрузил 
      </td> 
      <td> 
        <div class="d-flex align-items-center"> 
          <span class="mr-2">0</span> 
 
        </div> 
      </td> 
      <td id="conf'.$resul->ID.'"> 
        <div class="avatar-group"> 
          <span id="bg_'.$resul->ID.'" class="badge badge-dot mr-4">не подтвержден </span> 
 
        </div> 
      </td> 
      <td class="text-right"> 
        <div class="dropdown"> 
          <a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                          <i class="fas fa-ellipsis-v"></i> 
                        </a> 
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> 
            <a class="dropdown-item">Подтвердить</a> 
            <a class="dropdown-item" id="ot">Отказать</a> 
 
          </div> 
        </div> 
      </td> 
    </tr> 
  </tbody> 
</table> 
<input type="button" value="reset" class="res" />