Boa noite, eu estou tentando fazer uma barra de pesquisa que filtre por celulas entre varias tabelas, e gostaria que essa pesquisa ocultasse o <thead>
das tabelas que não possuam resultados correspondentes a pesquisa, ou seja, quando o usuário pesquisar Perna, a tabela onde constam Locais e Paises bem como a tabela onde constam Carros e Fabricantes de Motocicletas, por não ter em nenhuma <tr>
o texto Perna, deve ter o <thead>
ocultado, ou até mesmo toda a <table>
ocultada.
//pesquisa
$(document).ready(function () {
$("#searchInput").on("keyup", function () {
var value = $(this).val().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,
"");
$("tbody tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().normalize('NFD').replace(
/[\u0300-\u036f]/g, "").indexOf(value) > -1)
});
$("thead").each(function () {
let trVisiveis = $(this).parent().find('tbody tr').not(':hidden');
trVisiveis.length > 0 ? $(this).show() : $(this).hide();
})
});
});
// oculta todos menos o DIV selecionado no selector
$('#select_box').change(function () {
var select = $(this).find(':selected').text();
$("div").hide();
$('#' + select).show();
}).change();
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchInput" placeholder="Digite para filtrar...">
<br />
<br/>
<select id="select_box">
<option>tabelas-1</option>
<option>tabelas-2</option>
</select>
<br />
<br />
<div id="tabelas-1">
<table>
<thead>
<tr>
<th>Corpo</th>
<th>Cores</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cabeca</td>
<td>Azul</td>
</tr>
<tr>
<td>Braco</td>
<td>Vermelho</td>
</tr>
<tr>
<td>Perna</td>
<td>Amarelo</td>
</tr>
</tbody>
</table>
<br/>
<table>
<thead>
<tr>
<th>Carros</th>
<th>Fabricantes de Motocicletas</th>
</tr>
</thead>
<tbody>
<tr>
<td>Porshe</td>
<td>Harley</td>
</tr>
<tr>
<td>Mustang</td>
<td>Yamaha</td>
</tr>
<tr>
<td>Camaro</td>
<td>Honda</td>
</tr>
</tbody>
</table>
<br/>
<table>
<thead>
<tr>
<th>Locais</th>
<th>Paises</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aqui</td>
<td>Quenia</td>
</tr>
<tr>
<td>Ali</td>
<td>Alemanha</td>
</tr>
<tr>
<td>Acola</td>
<td>India</td>
</tr>
</tbody>
</table>
</div>
<div id="tabelas-2">
<table>
<thead>
<tr>
<th>Display</th>
<th>Datas comemorativas</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amoled</td>
<td>Natal</td>
</tr>
<tr>
<td>LCD</td>
<td>Páscoa</td>
</tr>
<tr>
<td>OLED</td>
<td>Ação de graças</td>
</tr>
</tbody>
</table>
<br/>
<table>
<thead>
<tr>
<th>Linhas de celulares</th>
<th>Sistemas Operacionais</th>
</tr>
</thead>
<tbody>
<tr>
<td>Redmi</td>
<td>Ubuntu</td>
</tr>
<tr>
<td>Galaxy S</td>
<td>Mint</td>
</tr>
<tr>
<td>iPhone</td>
<td>Fedora</td>
</tr>
</tbody>
</table>
</div>
Alguém teria alguma ideia de como alcançar isso? Obrigado.
PS: Algumas tentativas, sem sucesso, a partir do post
Sugestão do SeeTheC
function hide() {
$('tbody').each(function(){
if($(this).not("tr:hidden").length=1)
{
$(this).parent().find("thead").hide();
}
});
}
Sugestão do Musa
$('tbody').each(function(){
if ($(this).has("> tr:visible").length === 0){
$(this).closest('table').hide();
}
});
Sugestão do acontell
$("#filter").change(function () {// Select changes and filters rows of the different tables.
var class_to_filter = "." + $(this).val();// I'm accessing rows by class in order to close them, you may access them using some other method.
$.each($(class_to_filter), function (i, item) {// For each one of them, close and check if you have to close thead as well.
var $tr = $(item).closest('tr'),
$tbody = $tr.closest('tbody'),
$thead = $tbody.siblings('thead'),
numOfVisibleRows;
$tr.hide();// Hide row.
numOfVisibleRows = $('tr:visible', $tbody).length;// Number of sibling rows visible.
if (!numOfVisibleRows) {// if 0, hide thead.
$thead.hide();
}
});
});