Javascript-форум - Фильтр таблицы

$(function() { $("#cf_1x2").on("input", function() { var val = +this.value.trim(); localStorage.inp = val; $.each($("#t tbody"), function(i, tbody) { var match; var ok = !!($(".team, .1x2", tbody).children("td:nth-child(n + 2):nth-child(-n + 3)").filter(function(i, td) { match = td.textContent.match(/\d+(.\d+)?(?=\s*%)/); if(!match) return; return val <= +match[0]; }).length); $(this).toggle(ok); }); }).val(localStorage.inp || "").trigger("input"); });

Цитата:

Сообщение от рони (Сообщение 503488)

denis_kontarev,
знать бы, что вы хотите сделать? :)

У нас полностью функциональный фильтр по числовому значению. Фильтр берет полностью блок tbody и делает поиск от 2 до 3 ячейки (td) строк team,1x2,handicap,total. Там где есть удовлетворяющий числовой запрос условию, фильтр показывает нам блок tbody, остальные он скрывает. Как сделать, чтоб он работал так же, но допустим в теге tbody, он ни каким образом не делал поиск в строках tr handicap или tr total, а искал только ячейки в tr team и tr 1x2, но так же отрабатывал как цельный блок. Допустим нашел он число в строке tr 1x2, значит этот блок tbody показываем, включая tr handicap, tr total (весь блок tbody). Что вы посоветовали безусловно правильно, но если таким способом делать, то фильтрация tbody идет рандомная. Какие то tr показывает, какие то скрывает. Более подробно описал :thanks:

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    .ok{
            background-color: #228B22;
            color: #FFFFFF;
    }

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

    <script>
$(function() {
    $("#cf_1x2").on("input", function() {
        var val = this.value.trim();
        localStorage.inp = val;
        $.each($("#t tbody"), function(i, tbody) {
                var tds = $("td:nth-child(n + 2):nth-child(-n + 3)", tbody).filter(function(i, td) {
                var num = td.textContent.match(/\d+(.\d+)?(?=\s*%)/);
                var ok = false;
                if(val && num != null){
                ok = !isNaN(+val) && +val < +num[0];
                };
                $(td).toggleClass("ok", ok);
                return ok || !val;
                });
                $(this).toggle(!!tds.length);
        });
    }).val(localStorage.inp||"").trigger("input");
});

    </script>
</head>

<body>

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

<table id="t">
        <thead>
                <th>22.01</th>
                <th>Команды</th>
                <th>1</th>
                <th>X</th>
                <th>2</th>
        </thead>
        <tbody>
                <tr class="team"><td>70%</td></tr>
                <tr class="1x2"><td>1</td></tr>
                <tr class="handicap"><td>2</td></tr>
                <tr class="total"><td>3</td></tr>
        </tbody>
        <tbody>
                <tr class="team"><td>40%</td></tr>
                <tr class="1x2"><td>1</td></tr>
                <tr class="handicap"><td>2</td></tr>
                <tr class="total"><td>3</td></tr>
        </tbody>
        <tbody>
                <tr class="team"><td>10%</td></tr>
                <tr class="1x2"><td>1</td></tr>
                <tr class="handicap"><td>2</td></tr>
                <tr class="total"><td>3</td></tr>
        </tbody>
</table>

</body>
</html>
});

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .ok{ background-color: #228B22; color: #FFFFFF; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $("#cf_1x2").on("input", function() { var val = this.value.trim(); localStorage.inp = val; $.each($("#t tbody"), function(i, tbody) { var tds = $(".team td,[class='1x2'] td", tbody).filter(function(i, td) { var num = td.textContent.match(/\d+(.\d+)?/); console.log(num) var ok = false; if(val && num != null){ ok = !isNaN(+val) && +val < +num[0]; }; $(td).toggleClass("ok", ok); return ok || !val; }); $(this).toggle(!!tds.length); }); }).val(localStorage.inp||"").trigger("input"); }); </script> </head> <body> <input type="text" class="form-control pull-right" id="cf_1x2" placeholder="Движение 1X2 от %" style="width: 100%;"> <table id="t"> <thead> <th>22.01</th> <th>Команды</th> <th>1</th> <th>X</th> <th>2</th> </thead> <tbody> <tr class="team"><td>70%</td></tr> <tr class="1x2"><td>1</td></tr> <tr class="handicap"><td>2</td></tr> <tr class="total"><td>3</td></tr> </tbody> <tbody> <tr class="team"><td>40%</td></tr> <tr class="1x2"><td>1</td></tr> <tr class="handicap"><td>2</td></tr> <tr class="total"><td>3</td></tr> </tbody> <tbody> <tr class="team"><td>10%</td></tr> <tr class="1x2"><td>1</td></tr> <tr class="handicap"><td>2</td></tr> <tr class="total"><td>3</td></tr> </tbody> </table> </body> </html>