Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2020, 01:30
Интересующийся
Отправить личное сообщение для eLDeR Посмотреть профиль Найти все сообщения от eLDeR
 
Регистрация: 28.05.2019
Сообщений: 23

Фильтр строк в таблице с выбором checkbox checked
Есть таблица
<table class="table table-bordered" id="info-table">
<tbody>
<tr>
<td class="text-center"><strong>✔</strong></td>
<td class="text-center"><strong>Код</strong></td>
<td class="text-center"><strong>Название</strong></td>
</tr>
<tr>
<td class="text-center"></td>
<td>РАЗДЕЛ A</td>
<td><label for="РАЗДЕЛ A">СЕЛЬСКОЕ ХОЗЯЙСТВО, ОХОТА И ЛЕСНОЕ ХОЗЯЙСТВО</label></td>
</tr>
<tr>
<td class="text-center"></td>
<td>Подраздел AA</td>
<td><label for="Подраздел AA">СЕЛЬСКОЕ ХОЗЯЙСТВО, ОХОТА И ЛЕСНОЕ ХОЗЯЙСТВО</label></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" name="okved[]" value="01" id="01" /></td>
<td>01</td>
<td><label for="01">Сельское хозяйство, охота и предоставление услуг в этих областях</label></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" name="okved[]" value="01.1" id="01.1" checked  /></td>
<td>01.1</td>
<td><label for="01.1">Растениеводство</label></td>
</tr>
</tbody>
</table>

в которой есть javascript поиск
<input class="form-control" type="text" placeholder="ПОИСК" id="search-text" onkeyup="tableSearch()">
function tableSearch() {
    var phrase = document.getElementById('search-text');
    var table = document.getElementById('info-table');
    var regPhrase = new RegExp(phrase.value, 'i');
    var flag = false;
    for (var i = 1; i < table.rows.length; i++) {
        flag = false;
        for (var j = table.rows[i].cells.length - 1; j >= 0; j--) {
            flag = regPhrase.test(table.rows[i].cells[j].innerHTML);
            if (flag) break;
        }
        if (flag) {
            table.rows[i].style.display = "";
        } else {
            table.rows[i].style.display = "none";
        }
    }
}
Мне надо сделать дополнительно чекбокс чтобы щелкая по нему оставались строчки с checked input внутри первого тега td
начал писать, но не пойму куда дальше идти
<input type="checkbox" id="chkTest" /> <label for="chkTest">Мой выбор</label>
$('#chkTest').on('change', function(){ //На событие изменения чекера вешаем функцию
  toggleZeroes();
})
function toggleZeroes(){
  var table = document.getElementById('info-table');
  if(!$('#chkTest').prop('checked')){
    $(table).find('tr').show();
    return false;
  }
  else
  {
	$(table).find('tr.info td').hide();
  }
}
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2020, 07:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

eLDeR,
всё тоже самое что в первой функции только без цикла по ячейкам
flag = table.rows[i].cells[0].querySelector('input').checked;
if(!flag) table.rows[i].style.display = "none";

Последний раз редактировалось рони, 09.04.2020 в 07:53.
Ответить с цитированием
  #3 (permalink)  
Старый 09.04.2020, 08:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

eLDeR,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
function tableSearch() {
    var phrase = document.getElementById('search-text');
    var table = document.getElementById('info-table');
    var check = document.getElementById('chkTest');
    var checked = check.checked;
    var regPhrase = new RegExp(phrase.value, 'i');
    var flag = false;
    for (var i = 1; i < table.rows.length; i++) {
        flag = false;
        for (var j = table.rows[i].cells.length - 1; j >= 0; j--) {
            flag = regPhrase.test(table.rows[i].cells[j].innerHTML);
            if (flag) break;
        }
        if (flag) {
            table.rows[i].style.display = "";
        } else {
            table.rows[i].style.display = "none";
        };
        if(checked) {
        var checkbox = table.rows[i].cells[0].querySelector('input');
        if(checkbox){
          flag = checkbox.checked;
          if(!flag) table.rows[i].style.display = "none";
        }

        }
    }
}

  </script>
</head>
<body>
<input class="form-control" type="text" placeholder="ПОИСК" id="search-text" onkeyup="tableSearch()">
<input type="checkbox" id="chkTest" onchange="tableSearch()" /> <label for="chkTest">Мой выбор</label>

<table class="table table-bordered" id="info-table">
<tbody>
<tr>
<td class="text-center"><strong>✔</strong></td>
<td class="text-center"><strong>Код</strong></td>
<td class="text-center"><strong>Название</strong></td>
</tr>
<tr>
<td class="text-center"></td>
<td>РАЗДЕЛ A</td>
<td><label for="РАЗДЕЛ A">СЕЛЬСКОЕ ХОЗЯЙСТВО, ОХОТА И ЛЕСНОЕ ХОЗЯЙСТВО</label></td>
</tr>
<tr>
<td class="text-center"></td>
<td>Подраздел AA</td>
<td><label for="Подраздел AA">СЕЛЬСКОЕ ХОЗЯЙСТВО, ОХОТА И ЛЕСНОЕ ХОЗЯЙСТВО</label></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" name="okved[]" value="01" id="01" /></td>
<td>01</td>
<td><label for="01">Сельское хозяйство, охота и предоставление услуг в этих областях</label></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" name="okved[]" value="01.1" id="01.1" checked  /></td>
<td>01.1</td>
<td><label for="01.1">Растениеводство</label></td>
</tr>
</tbody>
</table>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Калькулятор стоимости услуг. Nik_Dev Элементы интерфейса 4 03.05.2018 16:50
Как убрать у одного checkbox checked и присвоить тому на который кликнула nina_ Элементы интерфейса 4 14.11.2016 13:27
Поиск по таблице и перестановка строк KemPavel jQuery 2 19.10.2015 12:28
Фильтр в таблице по select-ам Hedkost Общие вопросы Javascript 7 06.04.2014 12:58
Не могу получить состояние checkbox-а POMAH-UST Элементы интерфейса 2 08.10.2012 07:43