Друзья, вот такой код фильтра. Он делает поиск по ячейкам таблицы начиная со второго столбца по четвертый в зависимости от введенного значения. Если ввели 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