Фильтр строк в таблице с выбором 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();
}
}
|
eLDeR,
всё тоже самое что в первой функции только без цикла по ячейкам
flag = table.rows[i].cells[0].querySelector('input').checked;
if(!flag) table.rows[i].style.display = "none";
|
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>
|
| Часовой пояс GMT +3, время: 22:46. |