Показать сообщение отдельно
  #1 (permalink)  
Старый 23.01.2019, 19:33
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 46

Фильтр таблицы
Друзья, вот такой код фильтра. Он делает поиск по ячейкам таблицы начиная со второго столбца по четвертый в зависимости от введенного значения. Если ввели 40, он показывает tr, где есть числа 40 и больше. Но проблема в том, что другие tr он скрывает. Как сделать чтобы при вводе числа в input, фильтр искал значение и выводил 4 строки, то есть не скрывал название команд и строки HG и TL и наоборот если нашел значение в HG и не скрывал 1х2 и TL. На картинке мы ввели 40, в первой строке он найдет значение 40, но 3 другие строки скрыл. Как сделать чтоб он оставил все 4 строки? С учетом что в таблице таких tr очень много, то есть 4 строки это как один блок информации. 4 tr с каждым своим классом. Надеюсь не сильно запутал
$(function() {
  $("#cf_1x2").on("input", function() {
    var val = +this.value.trim();
    $.each($("#t tbody tr"), function(i, tr) {
        var td = [].filter.call(tr.querySelectorAll("td:nth-child(n + 2):nth-child(-n + 4)"), function(td) {
        var num = td.textContent.match(/\d+(.\d+)?(?=\s*%)/);
        var ok  = isNaN(val) || num !== null && val < +num[0]
        $(td).toggleClass("", ok)
        return ok;
      });
      $(this).toggle(!!td.length);
    });
  });
});


<div class="form-group">
<input type="text" class="form-control pull-right" id="cf_1x2" placeholder="Движение 1X2 от %" style="width: 100%;">
</div>

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


<tr class="team">
<td>00:30</td>
<td style="color:#666;text-align: left;font-weight: 600;">
<small style="color:black;font-weight: 600;">
<span>Conmebol - Sudamericano U20</span>
</small>
<br>Brazil U20 - Venezuela U2</td>
<td style="color:#666;text-align: left;font-weight: 600;"></td>
<td style="color:#666;text-align: left;font-weight: 600;"></td>
<td rowspan="4" style="color:green;font-weight: 600;>
<span style=" color:black;"="">2 - 1
<small>
<br>1 - 0</small></td>
</tr>


<tr class="1x2">
<td>1X2</td>
<td class="yes_volume_cf" style="color:green;font-weight: 600;">
<span style="color:black;">1.8</span>
<small style="color:red;">
<br>(1.66) 8%</small>
</td>
<td class="" style="color:green;font-weight: 600;">
<span style="color:black;">3.5</span>
<small style="color:green;">
<br>(3.6) 3%</small></td>
<td class="" style="color:green;font-weight: 600;">
<span style="color:black;">3.6</span>
<small style="color:green;">
<br>(5.25) 46%</small></td>
</tr>


<tr class="handicap">
<td>HG</td>
<td class="yes_volume_cf" style="color:green;font-weight: 600;">
<span style="color:black;">1.92</span>
<small style="color:red;">
<br>(1.87) 3%</small></td>
<td style="color:green;font-weight: 600;">
<span style="color:black;">0.5</span>
<small style="color:black;">
<br>(0.5)</small></td>
<td class="" style="color:green;font-weight: 600;">
<span style="color:black;">1.88</span>
<small style="color:green;">
<br>(1.92) 2%</small></td>
</tr>


<tr class="total">
<td>TL</td>
<td class="" style="color:green;font-weight: 600;">
<span style="color:black;">2.02</span>
<small style="color:red;">
<br>(1.8) 11%</small></td>
<td style="color:green;font-weight: 600;">
<span style="color:black;">2.5</span>
<small style="color:red;">
<br>(2)</small></td>
<td class="yes_volume_cf" style="color:green;font-weight: 600;">
<span style="color:black;">1.78</span>
<small style="color:green;">
<br>(2) 12%</small></td>
</tr>


http://www.fotolink.su/v.php?id=6d8e...3a3b6862c2714b
http://www.fotolink.su/v.php?id=90ff...0b9517c4482aca
http://www.fotolink.su/v.php?id=b694...f0c8865aa878bc
Изображения:
Тип файла: jpg 1Таблица.jpg (7.6 Кб, 4 просмотров)
Тип файла: jpg 2Что получается.jpg (10.3 Кб, 2 просмотров)
Тип файла: png 3html.png (6.7 Кб, 3 просмотров)

Последний раз редактировалось denis_kontarev, 23.01.2019 в 19:40.
Ответить с цитированием