Jquery, поиск по колонки таблицы

193

02 января 2019, 20:10

У меня есть таблица с тремя колонками.

+------------+------------+------------+
| user_login |    date    |   product  |
+------------+------------+------------+
|    neo     | 31.03.2999 |     hat    |
+------------+------------+------------+
|  trinity   | 31.03.1999 | sunglasses |
+------------+------------+------------+
|    neo     | 01.04.2999 | sunglasses |
+------------+------------+------------+
|  trinity   | 01.04.1999 |     hat    |
+------------+------------+------------+

так же у меня есть функция которая ищет текст по всем колонкам

$("#myFilter").on("keyup", function () {
    var inputValue = $(this).val().toLowerCase();
    $("#myTebleId tr").filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(inputValue) > -1)
    });
});

Подскажите как переписать готовую функцию для поиска значений не в строке, а в третий колонке 'product' ?

Answer 1

Дайте колонке product класс к примеру class="product" каждой ячейке. И тогда получится так:

$("#myFilter").on("keyup", function () {
    var inputValue = $(this).val().toLowerCase();
    $("#myTebleId tr").filter(function () {
        $(this).toggle($(this).children('.product').text().toLowerCase().indexOf(inputValue) > -1)
    });
});

$(".myFilter").on("keyup", function() { 
  var productValue = $('.input-product').val().toLowerCase(); 
  var userLoginValue = $('.input-user_login').val().toLowerCase(); 
 
  $("#myTebleId tr").each(function() { 
    $(this).toggle(          ($(this).children('.user_login').text().toLowerCase().indexOf(userLoginValue) > -1) &&         ($(this).children('.product').text().toLowerCase().indexOf(productValue) > -1)); 
  }); 
});

td { 
  padding: 10px; 
}

<input class="myFilter input-user_login"> 
<input class="myFilter input-product"> 
 
 
<table id="myTebleId"> 
  <tr> 
    <td class="user_login">Первый</td> 
    <td class="product">Продукт</td> 
  </tr> 
  <tr> 
    <td class="user_login">Первый</td> 
    <td class="product">another</td> 
  </tr> 
  <tr> 
    <td class="user_login">Второй</td> 
    <td class="product">еще продукт</td> 
  </tr> 
  <tr> 
    <td class="user_login">Anothe one</td> 
    <td class="product">product</td> 
  </tr> 
</table> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Из двух скриптов сделать один

Необходимо из двух скриптов сделать одинНужно чтобы когда выбиралось connectid=7 и presentId=1 то появляющее окно inbound_from, а если выбиралось connectid=7 и presentId=2...

209

Не проигрывается одна из анимаций на Unity

Когда нажимаю на кнопку удара, не проигрывается анимация Punch(), ее запускает State Punch

185

Как редактировать в DataGridTemplateColumn WPF

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

192

Не рабоает count()

Не работает функция count()Она должна искать в массиве числа которые совпадают с введеным

174