Блог

Главная - Вопросы по программированию - Jquery фильтрует список, нажав на ссылку и отобразив его в таблице

Jquery фильтрует список, нажав на ссылку и отобразив его в таблице

#jquery #filter #href #clicking

#jquery #Фильтр #href #щелчок

Вопрос:

Я пытаюсь выполнить поиск propper по значениям href, но когда я нажимаю на каждое значение, оно показывает мне пустую таблицу, а индекс значений всегда равен 0. Я перепробовал буквально все, но ничего из этого не сработало. Я думаю, что основная проблема заключается в скрипте, потому что он всегда показывает мне пустой индекс каждого элемента.

Может кто-нибудь сказать мне, чего мне не хватает?

Вот код:

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>  // This script is working
$(document).ready(function(){
  $("#myInput").on("keyup", function() {        
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  
}

.odd {
      background: #5a95ee;
}
.even{
  background: #7eb9e0;
}

</style>
</head>
<body>

<input id="myInput" type="text" placeholder="Search.." style="float: right; width: 500px;" value="">
<br><br>

<table>
  <thead>
  <tr>
    <th>Predmet</th>
    <th>Tip</th>
    <th>Nastavnik</th>
    <th>Grupe</th>
    <th>Dan</th>
    <th>Termin</th>
    <th>Ucionica</th>
  </tr>
  
  </thead>
{% for raspored in rasporedi %}
  <tbody id="myTable">

  <tr class="{{ loop.cycle('odd', 'even') }}">
      
    <td > {{raspored['predmet']}}</td>
    <td>{{raspored['tip']}}</td>
    <td >{{raspored['nastavnik']}}</td>
    <td>{{raspored['grupe']}}</td>           // Python list ( data from mongodb )
    <td>{{raspored['dan']}}</td>
    <td>{{raspored['termin']}}</td>
    <td>{{raspored['ucionica']}}</td>
  </tr>
 
  </tbody>
  {% endfor %}


   
</table>


<br> <br>

<table style="width: 400px;" style="margin:0 auto;">
    <thead>
    <tr >
     
      <th>Nastavnik</th>
      <th>Ucionica</th>
    </tr>
    
    </thead>
  {% for raspored in dr %}
    <tbody id="myTabledva">
  
    <tr>
        
      <td class="nastavnik {{ loop.cycle('odd', 'even') }}"  > <a href="#" >{{raspored['nastavnik']}}</a></td>  
      <td class="ucionica {{ loop.cycle('odd', 'even') }}">  <a href="#" >{{raspored['ucionica']}}</a></td>
    </tr>
   
  </tbody>
  
    
  

  
  <script>    // Something is wrong with this script but i don't know what

      $(document).on("click", ".nastavnik", function(){

   var nastavnik = $("#myInput").val($(this).text());  

 
     $("#myTable tr").filter(function() { 
      
    $(this).toggle($(this).text().toLowerCase().indexOf(nastavnik) > -1 )

     });
    
 });
 
   </script> 

    {% endfor %}
  
  </table>

</body>

</html> 

   <script>    // Something is wrong with this script but i don't know what

      $(document).on("click", ".nastavnik", function(){

   var nastavnik = $("#myInput").val($(this).text());  

 
     $("#myTable tr").filter(function() { 
      
    $(this).toggle($(this).text().toLowerCase().indexOf(nastavnik) > -1 )

     });
    
 });
 
   </script>

Комментарии:

1. Добро пожаловать в SO. Вы неправильно поняли, что filter() делает. Вы, кажется, полагаете, что он будет показывать / скрывать элементы, что не является его задачей. Он просто отфильтровывает набор сопоставленных элементов до подмножества. Ознакомьтесь с его документацией .

2. Спасибо. Итак, если filter не является функцией поддержки, что я должен использовать для отображения значения щелчка в таблице (поиск в реальном времени)?

3. Это правильная функция — она просто не выполняет то, что вы думали. Вам нужно отфильтровать либо show() либо hide() в коллекции.

4. Итак, вместо переключения мне нужно показать () ? $ (this). переключить ($(this).text().toLowerCase().indexOf(наставник) > -1 ) это будет: $(this).show($ (this).text().toLowerCase().indexOf(наставник) > -1 ) ?

5. Не совсем так. Возможно, вам понадобится еще несколько руководств по jQuery. Вы предполагаете слишком много, например, думая, что можете передавать аргументы show() . jQuery работает с помощью цепочки — сначала вы создаете коллекцию элементов, затем вы что-то делаете с ними, связывая с ними метод. Итак: $(‘.some.selector’).filter(функция() { /* … */ }).hide() , for example. toggle()` эквивалентно show() / hide() , так что да, вы тоже можете это использовать.

Ответ №1:

Вы, вероятно, хотите что-то вроде:

 $(document).on("click", ".nastavnik", function() {
    let nastavnik = $("#myInput").val(); //<-- get, not set, the entere val
    $("#myTable tr").show().filter(function() {  
        return $(this).text().toLowerCase().indexOf(nastavnik.toLowerCase()) == -1;
    }).hide();
 });

Логические:

  1. Получить введенное значение
  2. Получить все строки таблицы — показать все по умолчанию
  3. Отфильтруйте строки таблицы по тем, которые не содержат введенного поиска.
  4. Скройте эти строки.

Комментарии:

1. Я попробовал это сейчас, но это не сработало. Он показывает целую таблицу, а не текст с нажатой кнопкой мыши.

2. Нет никакой причины, которая не должна работать. Пожалуйста, воспроизведите проблему в скрипке JS или аналогичной, используя мой код, для демонстрации.

3. jsfiddle.net/mristic2719s/svL0ydta/7 Вот jsfiddle , когда вы нажимаете на «Какой-то учитель», он не отображается (обновляется) в таблице.

4. и, извините, это ссылка для совместной работы jsfiddle.net/5pnxa2kw/#amp;togetherjs=4yhzuA9g3p

Метки: ,