Possuo uma função que realiza uma busca pelos cadastros da tabela já criada, porém existe uma condição que deixa o código estranho e eu inclusive não entendi o motivo deste IF.
O trecho em questão é:
if(campoLinha){ operação }
Eu consigo manter este código funcionando corretamente sem ter que utilizar este trecho? qual a necessidade dele e significado?
OBS: outra duvida é quanto ao gatilho de execução da função, atualmente ela está da seguinte forma:
input type="text" placeholder="Pesquisar.." id="pesquisar" onkeyup="pesquisarColaborador()"
E ao tentar criar o elemento no javascript e adicionar um eventListener para realizar a função, o codigo também para de funcionar corretamente.
Exemplo:
let campoPesquisa = document.querySelector("#pesquisar")
campoPesquisa.addEventListener("onkeyup" pesquisarColaborador)
Segue o código inteiro para testes, a função em questão é a " pesquisarColaborador()"
let botaoInserirPessoa = document.querySelector("#inserirPessoa");
let tabela = document.querySelector("#cadastrosPessoa")
let mensagemErro = document.querySelector("#mensagem")
let campoId = document.querySelector("#id")
let campoNome = document.querySelector("#nome")
let campoCpf = document.querySelector("#cpf")
let campoRg = document.querySelector("#rg")
let campoNascimento = document.querySelector("#dataNascimento")
let campoSexo = document.querySelector("#sexo")
let bancoDeCadastros = [
{
"id": 1,
"nome": "Francisca Julia da Costa",
"cpf": "457.696.936-65",
"rg": "47.360.897-2",
"data_nasc": "23/03/1944",
"sexo": "Feminino"
},
{
"id": 2,
"nome": "Noah Felipe Silva",
"cpf": "956.531.431-70",
"rg": "40.974.782-8",
"data_nasc": "11/07/1964",
"sexo": "Masculino"
},
{
"id": 3,
"nome": "Alícia Rosângela Melo",
"cpf": "066.291.353-18",
"rg": "36.214.141-1",
"data_nasc": "18/02/1978",
"sexo": "Feminino"
},
{
"id": 4,
"nome": "Cristiane Renata Ana das Neves",
"cpf": "946.074.401-08",
"rg": "32.301.736-8",
"data_nasc": "10/05/1966",
"sexo": "Feminino"
},
{
"id": 5,
"nome": "Priscila Benedita Vanessa Ferreira",
"cpf": "888.282.394-68",
"rg": "44.524.670-4",
"data_nasc": "15/11/1966",
"sexo": "Feminino"
},
{
"id": 6,
"nome": "Bianca Carolina Nunes",
"cpf": "484.323.140-13",
"rg": "44.466.563-8",
"data_nasc": "16/03/1948",
"sexo": "Feminino"
},
{
"id": 7,
"nome": "Yuri Vicente Manuel Silveira",
"cpf": "250.111.093-56",
"rg": "18.597.361-9",
"data_nasc": "05/09/1974",
"sexo": "Masculino"
},
{
"id": 8,
"nome": "Melissa Alessandra Barros",
"cpf": "446.675.916-25",
"rg": "25.598.673-7",
"data_nasc": "13/01/2000",
"sexo": "Feminino"
},
{
"id": 9,
"nome": "Márcia Daniela Lara da Cruz",
"cpf": "932.803.826-02",
"rg": "40.653.176-6",
"data_nasc": "04/06/1986",
"sexo": "Feminino"
},
{
"id": 10,
"nome": "Filipe Anderson Rafael Assis",
"cpf": "704.869.005-41",
"rg": "39.383.334-3",
"data_nasc": "19/11/1995",
"sexo": "Masculino"
},
{
"id": 11,
"nome": "Luís Vinicius Sebastião Jesus",
"cpf": "035.960.588-56",
"rg": "29.915.692-8",
"data_nasc": "23/04/1965",
"sexo": "Masculino"
},
{
"id": 12,
"nome": "Cecília Caroline Nascimento",
"cpf": "034.396.672-78",
"rg": "48.673.066-9",
"data_nasc": "04/02/1951",
"sexo": "Feminino"
},
{
"id": 13,
"nome": "Raimunda Sandra Ferreira",
"cpf": "757.187.891-85",
"rg": "21.189.806-5",
"data_nasc": "17/11/1974",
"sexo": "Feminino"
},
{
"id": 14,
"nome": "Andreia Isabelly Juliana Melo",
"cpf": "736.348.985-85",
"rg": "24.677.018-1",
"data_nasc": "11/10/1963",
"sexo": "Feminino"
},
{
"id": 15,
"nome": "Nicolas Bernardo Moura",
"cpf": "061.370.865-26",
"rg": "16.302.343-8",
"data_nasc": "08/06/1989",
"sexo": "Masculino"
},
{
"id": 16,
"nome": "Diego Benjamin Tiago da Luz",
"cpf": "991.152.443-42",
"rg": "38.315.100-4",
"data_nasc": "04/06/1990",
"sexo": "Masculino"
},
{
"id": 17,
"nome": "Marlene Emanuelly Yasmin Cavalcanti",
"cpf": "781.233.625-52",
"rg": "21.068.742-3",
"data_nasc": "15/10/1961",
"sexo": "Feminino"
},
{
"id": 18,
"nome": "Vanessa Isabela da Luz",
"cpf": "872.138.490-85",
"rg": "44.289.193-3",
"data_nasc": "05/09/1982",
"sexo": "Feminino"
},
{
"id": 19,
"nome": "Camila Flávia Vera Mendes",
"cpf": "790.524.518-77",
"rg": "40.847.994-2",
"data_nasc": "01/07/1952",
"sexo": "Feminino"
},
{
"id": 20,
"nome": "Luana Lívia Lara Campos",
"cpf": "532.901.056-01",
"rg": "14.732.946-2",
"data_nasc": "19/08/1981",
"sexo": "Feminino"
},
{
"id": 21,
"nome": "Josefa Nina Galvão",
"cpf": "379.743.833-80",
"rg": "13.878.690-2",
"data_nasc": "27/01/1943",
"sexo": "Feminino"
},
{
"id": 22,
"nome": "Natália Isabelly Silvana da Paz",
"cpf": "454.172.867-29",
"rg": "22.986.096-5",
"data_nasc": "17/09/1980",
"sexo": "Feminino"
},
{
"id": 23,
"nome": "Amanda Sebastiana Vieira",
"cpf": "703.941.038-90",
"rg": "50.251.196-5",
"data_nasc": "08/06/1960",
"sexo": "Feminino"
},
{
"id": 24,
"nome": "Noah Pedro Alves",
"cpf": "074.733.106-58",
"rg": "32.110.015-3",
"data_nasc": "14/08/1992",
"sexo": "Masculino"
},
{
"id": 25,
"nome": "Giovana Camila da Conceição",
"cpf": "418.746.840-49",
"rg": "35.520.215-3",
"data_nasc": "25/06/1947",
"sexo": "Feminino"
},
{
"id": 26,
"nome": "Pietro Joaquim Emanuel Gonçalves",
"cpf": "003.502.230-25",
"rg": "12.099.068-4",
"data_nasc": "21/04/1999",
"sexo": "Masculino"
},
{
"id": 27,
"nome": "Tereza Kamilly Mariana Porto",
"cpf": "050.946.705-90",
"rg": "39.830.941-3",
"data_nasc": "16/06/1959",
"sexo": "Feminino"
},
{
"id": 28,
"nome": "Caroline Emanuelly Lívia Moreira",
"cpf": "673.831.546-57",
"rg": "24.561.727-9",
"data_nasc": "09/04/1948",
"sexo": "Feminino"
},
{
"id": 29,
"nome": "Gabriel Ricardo da Paz",
"cpf": "829.270.172-98",
"rg": "30.407.114-6",
"data_nasc": "24/03/1980",
"sexo": "Masculino"
},
{
"id": 30,
"nome": "Giovanni Igor Augusto Pires",
"cpf": "584.880.490-72",
"rg": "33.874.271-2",
"data_nasc": "24/08/1946",
"sexo": "Masculino"
}
]
//transforma todos dados pessoais na tabela editáveis.
let permitirEdicaoDados = ()=>{
let dadosCadastrados = document.querySelectorAll(".dPessoa")
dadosCadastrados.forEach(dado =>{
dado.setAttribute("contenteditable", true)
})
}
//adiciona o evento excluir ao botão lixeira.
let eventoBotaoExcluir = ()=>{
let botaoExcluir = document.querySelectorAll('.material-icons')
botaoExcluir.forEach((botao) => {
botao.addEventListener('click', () => {
let idLinha = botao.getAttribute('data-id')
document.getElementById(`${idLinha}`).remove()
})
})
}
//inclui os cadastros já existentes na base de dados
let renderizarCadastros = banco =>{
for (let i=0; i<bancoDeCadastros.length; i++){
let novaTabela = `<tr id="${banco[i].id}">
<td>${banco[i].id}</td>
<td class="dPessoa">${banco[i].nome}</td>
<td class="dPessoa">${banco[i].cpf}</td>
<td class="dPessoa">${banco[i].rg}</td>
<td class="dPessoa">${banco[i].data_nasc}</td>
<td class="dPessoa">${banco[i].sexo}</td>
<td class="material-icons" data-id="${banco[i].id}">delete_forever</td>
</tr>`
tabela.innerHTML += novaTabela
}
}
let limparCamposFormulario = ()=>{
campoId.value = ""
campoNome.value = ""
campoCpf.value = ""
campoRg.value = ""
campoNascimento.value = ""
campoSexo.value = ""
}
let checarIdRepetida = id =>{
let linhas = document.querySelectorAll("tr")
let idsExistentes = []
linhas.forEach(linha =>{
idsExistentes.push(linha.getAttribute("id"))
})
if(idsExistentes.includes(id)){
return true
}
else {
return false
}
}
let pesquisarColaborador = ()=>{
let campoPesquisa = document.getElementById("pesquisar").value.toUpperCase()
let linha = tabela.getElementsByTagName("tr")
for(let i = 0; i<linha.length; i++){
let campoLinha = linha[i].getElementsByTagName("td")[1]
if(campoLinha){
let campoTexto = campoLinha.textContent || campoLinha.innerhtml
if(campoTexto.toUpperCase().indexOf(campoPesquisa) > -1){
linha[i].style.display = ""
}
else{
linha[i].style.display = "none"
}
}
}
}
//criação de uma nova tabela
botaoInserirPessoa.addEventListener("click", ()=>{
let id = campoId.value
let nome = campoNome.value
let cpf = campoCpf.value
let rg = campoRg.value
let nascimento = campoNascimento.value
let sexo = campoSexo.value
if(id == "" || nome == "" || cpf == "" || rg == "" || nascimento == "" || sexo == ""){
mensagemErro.innerHTML = "Preencha todos os campos!"
}
else if(checarIdRepetida(id)){
mensagemErro.innerHTML = "ID já cadastrado!"
}
else{
let novaTabela = `<tr id="${id}">
<td>${id}</td>
<td class="dPessoa">${nome}</td>
<td class="dPessoa">${cpf}</td>
<td class="dPessoa">${rg}</td>
<td class="dPessoa">${nascimento}</td>
<td class="dPessoa">${sexo}</td>
<td class="material-icons" data-id="${id}">delete_forever</td>
</tr>`
tabela.innerHTML += novaTabela
mensagemErro.innerHTML = ""
let novoCadastro = {
id: id,
nome: nome,
cpf: cpf,
rg: rg,
data_nasc: nascimento,
sexo: sexo,
}
bancoDeCadastros.push(novoCadastro)
limparCamposFormulario()
eventoBotaoExcluir()
permitirEdicaoDados()
}
})
renderizarCadastros(bancoDeCadastros)
eventoBotaoExcluir()
permitirEdicaoDados()
/*Root*/
*{
font-family: Roboto;
font-size: 16px;
margin: 0;
padding: 0;
color: rgb(51, 51, 51);
}
/*Container principal*/
#container{
text-align: center;
align-items: center;
margin: 15px;
}
/*Campos do formulário*/
#inserirDados div, input, button{
margin: 5px 0 5px 0;
}
#inserirDados #mensagem{
color: tomato;
transition: .3s;
}
#inserirDados input{
width: 120px;
}
#inserirDados button{
width: 50px;
height: 25px;
border: 0;
border-radius: 8px;
font-weight: 500;
color: rgb(248, 248, 248);
background-color: rgb(38, 98, 230);
transition: .3s;
}
#inserirDados button:hover {
cursor: pointer;
background-color: rgb(51, 233, 111);
transition: .3s;
}
/*Tabela*/
#cadastrosPessoa{
margin: auto;
border-collapse: collapse;
text-align: left;
}
#cadastrosPessoa tr{
transition: .2s;
}
#cadastrosPessoa tr:hover{
background-color: rgb(235, 235, 235);
transition: .2s;
}
#cadastrosPessoa th{
border: 0;
padding: 5px;
background-color: rgb(38, 98, 230);
color: #ffffff;
}
#cadastrosPessoa td{
border-bottom: 1px solid rgb(51, 233, 111);
font-weight: normal;
padding: 5px;
}
#cadastrosPessoa .material-icons{
cursor:pointer;
display: contents;
transition: .3s;
}
#cadastrosPessoa .material-icons:hover{
color: tomato;
transition: .3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listagem de pessoas</title>
</head>
<body>
<div id="container">
<div id="inserirDados">
<h1>Incluir colaborador</h1>
<input type="text" name="id" id="id" placeholder="ID">
<input type="text" name="nome" id="nome" placeholder="Nome">
<input type="text" name="cpf" id="cpf" placeholder="CPF">
<input type="text" name="rg" id="rg" placeholder="RG">
<input type="text" name="dataNascimento" id="dataNascimento" placeholder="Nascimento">
<input type="text" name="sexo" id="sexo" placeholder="Sexo">
<br>
<button id="inserirPessoa">OK</button>
<div>
<input type="text" placeholder="Pesquisar.." id="pesquisar" onkeyup="pesquisarColaborador()">
</div>
<div id="mensagem"></div>
</div>
</div>
<table id="cadastrosPessoa">
<tr>
<th>ID</th>
<th>Nome</th>
<th>CPF</th>
<th>RG</th>
<th>Nascimento</th>
<th>Sexo</th>
<th></th>
</tr>
</table>
</body>
<script src="/scripts.js"></script>
<link rel="stylesheet" href="/main.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</html>
let pesquisarColaborador = ()=>{
let campoPesquisa = document.getElementById("pesquisar").value.toUpperCase()
let linha = tabela.getElementsByTagName("tr")
for(let i = 0; i<linha.length; i++){
let campoLinha = linha[i].getElementsByTagName("td")[1]
if(campoLinha){
let campoTexto = campoLinha.textContent || campoLinha.innerhtml
if(campoTexto.toUpperCase().indexOf(campoPesquisa) > -1){
linha[i].style.display = ""
}
else{
linha[i].style.display = "none"
}
}
}
}
if(campoLinha)
provavelmente saber se campoLinha não é nulo