Olá comunidade! Estou tendo um problema com um código!
Eu tenho uma tabela com 9 colunas e 137 linhas. Acima dela eu tenho um campo de busca para procurar as lojas ou pelo NOME, ou pelo CEP da mesma.
Eu consegui desenvolver o código para procurar a loja pelo NOME, que é a primeira coluna da tabela. O problema é que eu não tenho uma coluna específica para CEP, só a 6ª coluna é o ENDEREÇO e a 9ª linha é um link que abre o Google Maps com a localização da loja.
Como que eu posso adaptar meu código para que quando eu digito o NOME OU o CEP, a tabela retorne o resultado correto da busca?
<style type="text/css">
.instal {
margin-left: auto;
margin-right: auto;
}
h1 {
padding-top: 40px;
color: #EE322E;
font-family: Rubik;
font-size: 48px;
weight:300;
letter-spacing: 0.33px;
line-height: 57px;
text-align: center;
}
.oficina {
font-size: 14px;
line-height: 17px;
text-align: center;
letter-spacing: 0.09px;
font-family: Lato;
}
.cep {
font-size: 14px;
line-height: 20px;
text-align: center;
letter-spacing: 0.07px;
font-family: Lato;
weight: 300;
}
input.campos {
padding-bottom: 10px;
outline: none;
border-style: solid;
border-bottom: 10px;
border-left: 10px;
border-right: 10px;
border-width: 1px;
border-color: lightgray;
width: 400px;
}
label {
font-size: 18px;
line-height: 22px;
letter-spacing: 0.09px;
font-family: Lato;
weight: 300;
color: #353535;
text-align: left;
}
table {
width: 100%;
white-space: nowrap;
}
th {
background-color: #E5E5E5;
font-family: Rubik;
weight: bold;
font-size: 14px;
text-align: center;
line-height: 17px;
letter-spacing: 0.06px;
color: #353535;
border: 2px solid white;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
}
td {
Font-family: Lato;
color: #353535;
font-size: 14px;
text-align: center;
line-height: 17px;
letter-spacing: 0.06px;
border: 2px solid #E5E5E5;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
}
div.meio {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 600px;
}
img.icone {
margin-right: 20px;
position: relative;
bottom: 20px;
}
img.foto {
margin-left: 10px;
}
#input {
border-top: 1px solid lightgray;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
width: 90%;
}
.submit {
width: 56px;
position: relative;
top: 20px;
}
.compacto {
height: 60px;
position: relative;
padding-bottom: 100px;
bottom: 50px;
}
label {
position: relative;
top:30px;
}
</style>
<br>
<br>
<div>
<h1>
<img class="icone" margin-right="20px" src="/file/general/icon-office.png" width="83" />Precisa de instalação<font color="#353535">?</font>
</h1>
</div>
<br>
<br>
<p class="oficina">
A KD Pneus garante a troca gratuita nas oficinas credenciadas, dos pneus comprados conosco.
</p>
<br>
<br>
<p class="cep">
Digite um CEP ou uma palavra chave no campo abaixo para fazer uma busca
</p>
<br>
<br>
<br>
<form class="form">
<div class="meio">
<div class="compacto">
<label for="input"></label>
<br>
<input id="input" type="text" name="fname" placeholder="CEP ou Nome da Oficina" />
<input class="submit" onclick="pesquisar();return false;" id="pesquisar" type="image" src="/file/general/icon-caret-right-red.png" />
</div>
</div>
</form>
<script>
let input = document.querySelector("#input");
input.addEventListener('focusin', function(){
let label = document.querySelector('label[for="input"]');
label.textContent = input.placeholder;
input.placeholder = '';
});
input.addEventListener('focusout', function(){
let label = document.querySelector('label[for="input"]');
input.placeholder = label.textContent;
label.textContent = '';
});
function pesquisar() {
// Declaração de variáveis.
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("input");
filter = input.value.toUpperCase();
table = document.getElementById("table");
tr = table.getElementsByTagName("tr");
// Busca todas as linhas da tabela e esconde aquelas que não correspondem à busca.
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
};
</script>
Um exemplo do código funcionando como eu gostaria pode ser encontrado neste site: https://www.kdpneus.com.br/lojas
A plataforma que eu uso não aceita Jquery, então a solução teria que ser em javascript puro.
Desde já agradeço a atenção e o empenho dessa comunidade que tem me ajudado muito!