Pessoal tenho que implementar esse filtro, e até o momento tenho esse código em JS, porém o filtro não está preciso, ele trás resultados que não estão setados, alguém me da um luz de como posso melhorar?
function filtrarFundos() {
/** Buscar dados do formulario */
const formData = new FormData(document.getElementById("filtroForm"));
var estrategia = formData.get("estrategia");
var esg = formData.get("esg");
var perfil = formData.get("risco");
var resgate = resgateSlider.noUiSlider.get();
var aplicacao = aplicacaoSlider.noUiSlider.get();
var objetivo = formData.get("objetivo");
/** Busca dados da tabla **/
var getTable = document.querySelector(".tabela-fundos");
var getBodyTable = getTable.querySelector("tbody");
var getTableRow = getBodyTable.getElementsByTagName("tr");
for (i = 0; getTableRow.length > i; i++) {
getTableRow[i].classList.add("d-none");
var getTd = getTableRow[i].getElementsByTagName("td");
for (j = 0; getTd.length > j; j++) {
var dataType = getTd[j].getAttribute("data-type");
var dataValue= getTd[j].getAttribute("data-value");
if (dataType === "estrategia" && dataValue === estrategia) {
getTableRow[i].classList.remove("d-none");
}
if (dataType === "perfil" && dataValue === perfil) {
getTableRow[i].classList.remove("d-none");
}
if (dataType === "resgate" && dataValue >= resgate) {
getTableRow[i].classList.remove("d-none");
}
if (dataType === "aplicacao-minima" && dataValue >= aplicacao) {
getTableRow[i].classList.remove("d-none");
}
if (dataType === "esg" && dataValue === esg) {
getTableRow[i].classList.remove("d-none");
}
}
}
//console.log(estrategia, esg, risco, resgate, aplicacao, objetivo)
/** Necessario passar essa função para fechar a modal do bootstrap*/
modalFundos.hide();
}
<section class="container listagem-fundos">
<div class="row">
<div class="col-12 box-table">
<table class="table tabela-fundos">
<thead>
<tr class="d-none d-lg-table-row">
<th scope="col">Fundo</th>
<th scope="col">PERFIL DE RISCO</th>
<th scope="col">ESTRATÉGIA</th>
<th scope="col">RESGATE</th>
<th scope="col">APL. INICIAL MÍNIMA</th>
<th scope="col">
<div class="col-12 d-flex align-items-center">
<button class="botaoEsg" onclick="btnEsg()">?</button>
ESG
</div>
</th>
<th scope="col"></th>
</tr>
<tr class="mobile d-lg-none">
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr class="separador"></tr>
<tr>
<th scope="row" class="fundo-imobiliario">
<div class="title">
Fundo de Investimento Imobiliário Brasílio Machado
</div>
</th>
<td class="d-none d-lg-table-cell" data-type="perfil" data-value="conservador1">Conservador 1</td>
<td class="d-none d-lg-table-cell" data-type="estrategia" data-value="imobiliario">Fundo Imobiliário</td>
<td class="d-none d-lg-table-cell" data-type="resgate" data-value="0">Não se aplica</td>
<td class="d-none d-lg-table-cell" data-type="aplicacao-minima" data-value="0">Não se aplica</td>
<td class="d-none d-lg-table-cell" data-type="esg" data-value="esg-ativo">
<div class="col-12 d-flex align-items-center">
<div class="col-12 d-flex align-items-center">
<button class="botaoEsg" onclick="btnEsg()">?</button>
ESG
</div>
</div>
</td>
<td><a href="#" class="btn btn-primary">Saiba mais</a></td>
</tr>
....