Умный фильтр таблиц с jquery

Мне нужен живой фильтр с использованием jQuery в моей таблице.

Например: я хочу отображать только строки, в которых столбец имени содержит «а», а для ввода выбора фрилансера установлено значение «да».

Я нашел некоторые решения, которые фильтруют полнотекстовую фильтрацию на основе текстовых входов, и некоторые решения, основанные на выборочных входах, но ничего там, где есть комбинация обоих. Есть ли способ сделать это без таблиц данных или подобных плагинов?

Буду признателен за каждый совет!

<table id="testTable">
    <thead>
        <tr>
            <th>Name <input type="text" name="name"></th>
            <th>Surname <input type="text" name="surname" /></th>
            <th>City <select name="city">
                        <option value="NY">NY</option>
                        <option value="NJ">NJ</option>
                     </select>       
            </th>
            <th>Freelancer <select name="freelancer">
                                <option value="yes">yes</option>
                                <option value="no">no</option>
                            </select>  
            </th>
        </tr>
    </thead>
    <tbody>
        <tr><td>John</td><td>Smith</td><td>NJ</td><td>yes</td></tr>
        <tr><td>Luke</td><td>Jones</td><td>NY</td><td>no</td></tr>
        <tr><td>Jack</td><td>White</td><td>NY</td><td>yes</td></tr>
        <tr><td>Abby</td><td>Scott</td><td>NJ</td><td>yes</td></tr>
        <tr><td>Luke</td><td>Price</td><td>NY</td><td>no</td></tr>
    </tbody>
</table>

ты что-нибудь пробовал?

Muhammad Usman 11.04.2018 13:55
0
1
147
1

Ответы 1

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

Сначала вам нужно добавить идентификатор к вашему вводу:

id="name" // just an example

и я добавил имя класса к вашему первому td:

class="name"

Затем вы можете добавить метод в свой файл js

$('#name').keyup(function () {
  var tr = $('.name')
  var input = $('#name').val()
  tr.each(function() {
    console.log($(this).html().indexOf(input))
    if($(this).html().indexOf(input) >= 0){
      $(this).parent().show()
    }
    else{
      $(this).parent().hide()      
    }
  })
})

https://codepen.io/anon/pen/dmrKxm

Я надеюсь это поможет тебе

Другие вопросы по теме