Modify a function while maintaining its functionality

Asked

Viewed 39 times

0

I have a function that performs a search for the entries of the table already created, but there is a condition that leaves the code strange and I even did not understand the reason for this IF.

The section in question is:

if(peasant){ operation }

I can keep this code working properly without having to use this excerpt? what is its need and meaning?

NOTE: another doubt is about the function execution trigger, currently it is as follows:

input type="text" placeholder="Search.." id="search" onkeyup="searchColaborator()"

And when trying to create the element in javascript and add an eventListener to perform the function, the code also stops working correctly.

Example:

Field Let Search = Search.querySelector("#search")

campoPesquisa.addeventlistener("onkeyup" searchColaborator)

Follow the whole code for testing, the function in question is the " searchColaborator()"

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"
      }
    }

  }
}

javascript html css
  • 1

    if(campoLinha) Probably know if the little peasant isn’t null

1 answer

2


I can keep this code working properly without having to use this excerpt? what is its need and meaning?

Not if you want to make the search filter, the if(campoLinha) {} is responsible for checking whether the table contains the name(s) entered(s), code explained below:

// Variável que guarda o valor digitado no campo de pesquisa
let campoPesquisa = document.getElementById("pesquisar").value.toUpperCase();
// Variável que referencia a tabela no HTML
let linha = tabela.getElementsByTagName("tr");

// Percorre a tabela
for(let i = 0; i<linha.length; i++){
  // Variável que referencia a coluna nome da tabela
  let campoLinha = linha[i].getElementsByTagName("td")[1];

  // Necessário pq na primeira iteração do laço for campoLinha é undefined
  if(campoLinha){
    // Variável que pega o texto da coluna nome
    let campoTexto = campoLinha.textContent || campoLinha.innerhtml;
    // Verifica através do índice da string se os caracteres da tabela
    // coincidem com o digitado no campo de pesquisa
    if(campoTexto.toUpperCase().indexOf(campoPesquisa) > -1){
      linha[i].style.display = ""; // Mantém o estilo original da tabela
    }
    // Se os valores não coincidirem não mostra nada
    else{
      linha[i].style.display = "none"; // 
    }
  }
}

NOTE: another doubt is about the function execution trigger, currently it is as follows:

input type="text" placeholder="Pesquisar.." id="pesquisar" onkeyup="pesquisarColaborador()"

And when trying to create the element in javascript and add an eventListener to perform the function, the code also stops working correctly.

let campoPesquisa = document.querySelector("#pesquisar")

campoPesquisa.addEventListener("onkeyup" pesquisarColaborador)

The error there is only syntax, the event should be declared only with your name without the on and also with a , between the declarations in this way campoPesquisa.addEventListener("keyup", pesquisarColaborador), as you can see in the code working below:

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 campoPesquisa = document.querySelector("#pesquisar")

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()
campoPesquisa.addEventListener("keyup", pesquisarColaborador);
/*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;
}
<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">
    </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>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  • 1

    Thank you so much! @Leandrade

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.