Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 11.02.2019, 22:58
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от denis_kontarev
Скажите, как сделать проверку еще по строкам tr. Допустим брать еще проверку строк класса "team" и "1x2", а остальные tr он не трогал?
$(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");
});

Последний раз редактировалось Malleys, 11.02.2019 в 23:02.
Ответить с цитированием
  #22 (permalink)  
Старый 12.02.2019, 08:38
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 46

Подробное описание
Сообщение от рони Посмотреть сообщение
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 показывает, какие то скрывает. Более подробно описал
<!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>
});

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

Malleys, благодарю за отклик, но немного не так, я написал подробнее постом ниже, но как реализовать не знаю
Ответить с цитированием
  #24 (permalink)  
Старый 12.02.2019, 10:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

denis_kontarev,

<!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>
Ответить с цитированием
  #25 (permalink)  
Старый 12.02.2019, 13:45
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 46

Благодарю всех
Благодарю вас друзья! Спасибо за очередную помощь!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Jquery фильтр таблицы - беда с заголовками alex25region jQuery 3 15.01.2017 12:27
фильтр для 60ти полей таблицы skrudjmakdak Элементы интерфейса 3 12.06.2014 10:03
Фильтр для таблицы через select-ты! Hedkost jQuery 1 25.02.2014 16:39
Помогите преобразовать фильтр таблицы под select greencard jQuery 2 21.08.2013 12:36
Фильтр таблицы с rowspan sigvart Элементы интерфейса 7 09.06.2012 16:59