Javascript-форум - Фильтр данных в таблице при заданном условии

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Фильтр данных в таблице при заданном условии (https://javascript.ru/forum/jquery/73245-filtr-dannykh-v-tablice-pri-zadannom-uslovii.html)

Фильтр данных в таблице при заданном условии

Здравствуйте, прошу помочь реализовать идею живой фильтрации данных. Есть таблица с числовыми данными, необходимо отображать только те tr, которые больше числа, которое мы указали в окошке input. Прошу помочь написать код, спасибо.
Есть код поиска в таблице именно по символам, а как сделать, чтоб он искал только числа при заданном диапазоне к примеру >30

$(document).ready(function(){
$("#search").keyup(function(){
_this = this;
$.each($("#filter tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();                
});
});
});

Цитата:

Сообщение от denis_kontarev

те tr

может td?

сразу исключаем всю строку tr, если условия не подходят

denis_kontarev,
сделайте минимальный html.

<div class="form-group">
<input type="text" class="form-control pull-right" id="search" placeholder="Поиск по таблице">
</div>

<table class="simple" id="filter">

<tr>
<td>33%</td>
<td>30%</td>
<td>41%</td>
</tr>

<tr>
<td>56%</td>
<td>20%</td>
<td>40%</td>
</tr>

<tr>
<td>80%</td>
<td>13%</td>
<td>56%</td>
</tr>

</table>

К примеру пишем в поисковой форме число 50 и он показывает только tr с числами больше 50

фильтрация строк таблицы

denis_kontarev,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  $("#search").on("input", function() {
    var val = +this.value.trim();
    $.each($("#filter tbody tr"), function(i, tr) {
      var td = [].filter.call(tr.querySelectorAll("td"), function(td) {
        var num = +td.textContent.replace(/\D/g, "");
        return isNaN(val) || !isNaN(num) && val < num;
      });
      $(this).toggle(!!td.length);
    });
  });
});
  </script>
</head>

<body>
<div class="form-group">
<input type="text" class="form-control pull-right" id="search" placeholder="Поиск по таблице">
</div>

<table class="simple" id="filter">

<tr>
<td>33%</td>
<td>30%</td>
<td>41%</td>
</tr>

<tr>
<td>56%</td>
<td>20%</td>
<td>40%</td>
</tr>

<tr>
<td>80%</td>
<td>13%</td>
<td>56%</td>
</tr>

</table>

</body>
</html>

Спасибо, но то ли я не могу додумать, то ли бог его знает, но ругается на
var num = +td.textContent.replace(/\D/g, "");

denis_kontarev,
значит у вас в ячейках не то что, что вы показали в макете.

А можно ли поменять условие только в этой строке? чтоб скрипт воспринимал только числа

if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)

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

Представлю исходный код таблицы tr

<tr>

<td>00:15</td>

<td style="color:blue;text-align: left;">

<small style="color:black;">
<span>Футбол. Чемпионат Боливии. Лига LFPB</span>
</small>

<br>Ройял Пари - Сан-Хосе Оруро</td>

<td class="yes_volume_cf" style="color:green;font-weight: 600;">
<span style="color:black;">2.63</span>
<small style="color:green;">
<br>(3) 14% <img src="/images/up.png" width="9" height="11" align="center" alt="img"></small></td>

<td class="" style="color:green;font-weight: 600;">
<span style="color:black;">3.3</span>
<small style="color:green;">
<br>(3.36) 2% <img src="/images/up.png" width="9" height="11" align="center" alt="img"></small></td>

<td class="" style="color:green;font-weight: 600;">
<span style="color:black;">2.81</span>
<small style="color:red;">
<br>(2.44) 13% <img src="/images/down.png" width="9" height="11" align="center" alt="img"></small></td>

<td class="">33%</td>
<td class="">30%</td>
<td class="yes">41%</td>

<td>0:2</td>
<td class="yes">12</td>
    
</tr>

Прошу прощения, я просто в java не силен

denis_kontarev,
и по каким ячейкам фильтровать??

<td class="">33%</td>
<td class="">30%</td>
<td class="yes">41%</td>

Класс меняется, где значение больше там и yes

denis_kontarev,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .yes{
    background-color: Blue;
    color:  White;
    font-size: 48px;
     padding: 2px 8px;
     border-radius: 4px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  $("#search").on("input", function() {
    var val = this.value.trim();
    $.each($("#filter tbody tr"), function(i, tr) {
      var td = [].filter.call(tr.querySelectorAll("td:nth-child(n + 6):nth-child(-n + 8)"), function(td) {
        var num = td.textContent.match(/\d+(.\d+)?(?=\s*%)/);
        var ok = true;
        if(isNaN(val) || !val){
          $(td).removeClass("yes")
        }
        else {
            ok  =  num !== null && +val < +num[0];
            $(td).toggleClass("yes", ok)
        }
        return ok;
      });
      $(this).toggle(!!td.length);
    });
  });
});
  </script>
</head>

<body>
<div class="form-group">
<input type="text" class="form-control pull-right" id="search" placeholder="Поиск по таблице">
</div>

<table class="simple" id="filter">

<tr>

<td>00:15</td>

<td style="color:blue;text-align: left;">

<small style="color:black;">
<span>Футбол. Чемпионат Боливии. Лига LFPB</span>
</small>

<br>Ройял Пари - Сан-Хосе Оруро</td>

<td class="yes_volume_cf" style="color:green;font-weight: 600;">
<span style="color:black;">2.63</span>
<small style="color:green;">
<br>(3) 14% <img src="/images/up.png" width="9" height="11" align="center" alt="img"></small></td>

<td class="" style="color:green;font-weight: 600;">
<span style="color:black;">3.3</span>
<small style="color:green;">
<br>(3.36) 2% <img src="/images/up.png" width="9" height="11" align="center" alt="img"></small></td>

<td class="" style="color:green;font-weight: 600;">
<span style="color:black;">2.81</span>
<small style="color:red;">
<br>(2.44) 13% <img src="/images/down.png" width="9" height="11" align="center" alt="img"></small></td>

<td class="">33%</td>
<td class="">30%</td>
<td class="yes">41%</td>

<td>0:2</td>
<td class="yes">12</td>

</tr>


</table>

</body>
</html>

огромное спасибо!!! супер работает!

denis_kontarev,
изменена фильтрация пост №14!!!