3
respostas

Tabela com valores dinâmicos em JavaScript

Fala galera !

Tenho uma requisição Ajax que utilizar o método post que busca todas as solicitações de acesso de um sistema do banco e retorna em uma tabela HTML no front.

Ao clicar em aceitar um usuário sempre pego o primeiro valor da tabela, mas queria que pegasse o usuário que realizei o click.

Minha dúvida é: Por se tratar de uma tabela dinâmica, como consigo clicar na TD, acessar o pai TR e posteriormente ir no primeiro TD do pai que possui o ID para fazer select no banco ?

Segue código da requisição AJAX:

$(document).ready(listaUsuarios)
function listaUsuarios() {
  $.ajax({
    type: 'POST',
    url: 'http://localhost:3000/listar',
    dataType: 'json',
    success: function (data) {
      qtd = data.success.length
      for (var x = 0; qtd > x; x++) {
        $('#resultado').append(`
        <tr id='${data.success[x].id}'>
          <td>${data.success[x].id}</td>
          <td>${data.success[x].nome}</td>
          <td>${data.success[x].setor}</td>
          <td>${data.success[x].autorizado}</td>
          <td onclick='aceito()' style='cursor:pointer'>${data.success[x].aceitar}</td>
          <td onclick='recusou()' style='cursor:pointer'>${data.success[x].recusar}</td>
          <td style='cursor:pointer'><img src='/icons/pencil.svg' style='margin-left:10px'
           onclick='editar()' data-toggle="modal" data-target=".bd-example-modal-lg"></td>
        </tr>`)
      }
    }
  })
}

Eu fiz um código que conseguiu pegar o valor, porém o mesmo "acumular os clicks e acaba dando bug no html. Segue abaixo:

function aceito() {
  let tr = document.querySelectorAll('tr')
  tr.forEach(function (trs) {
    trs.addEventListener('click', function () {
      let id = trs.children[0]
      $.ajax({
        type: 'post',
        url: 'http://localhost:3000/aceitaUsuario',
        dataType: 'json',
        data: {
          id: id.innerText
        },
        success: function (data) {
          if (data.success == 'ok') {
            let campo = trs.children[4]
            let campo2 = trs.children[5]
            campo.innerText = 'Ok'
            campo2.innerText = 'Excluir'
          } else {
          }
        }
      })
    })
  })
}

Código do Back end:

app.post('/aceitaUsuario', function (req, res) {
  let id = req.body.id
  let busca = `SELECT id=${id} FROM login;`
  conexao.query(busca, function (erro, resultado) {
    if (erro) {
      console.log(erro)
    } else {
      if (resultado.length >= 1) {
        let up = `UPDATE login SET acesso='Autorizado', aceitar='Ok' , recusar='Excluir' WHERE id='${id}';`
        conexao.query(up, function (erro, resultado) {
          if (erro) {
            console.log(erro)
          } else {
            res.json({ success: 'ok' })
          }
        })
      }
    }
  })
})

Se alguém conseguir ajudar vou ficar muito agradecido ! Valeu !!!

3 respostas

Fala ai Guilherme, tudo bem? Vamos lá:

Minha dúvida é: Por se tratar de uma tabela dinâmica, como consigo clicar na TD, acessar o pai TR e posteriormente ir no primeiro TD do pai que possui o ID para fazer select no banco ?

Talvez precise alterar um pouco a maneira como você está criando as linhas na tabela, tente fazer algo assim:

const tr = document.createElement('tr')
tr.addEventListener('click', () => {
    // deve logara linha inteira
    console.log(data.success[x])
})
tr.innerHTML = `
          <td>${data.success[x].id}</td>
          <td>${data.success[x].nome}</td>
          <td>${data.success[x].setor}</td>
          <td>${data.success[x].autorizado}</td>
          <td onclick='aceito()' style='cursor:pointer'>${data.success[x].aceitar}</td>
          <td onclick='recusou()' style='cursor:pointer'>${data.success[x].recusar}</td>
          <td style='cursor:pointer'><img src='/icons/pencil.svg' style='margin-left:10px'
           onclick='editar()' data-toggle="modal" data-target=".bd-example-modal-lg"></td>
`
$('#resultado').append(tr)

A ideia seria mais ou menos essa, tu cria a tr como um objeto e víncula o evento de listener para click's.

Espero ter ajudado.

Quando coloco para imprimir console.log(data.success[x]) o valor me indefinido.

Sabe me dizer por que ?

Fala Guilherme, eu precisaria entender o que é retornado pelo data e data.success para ter uma visão maior do que pode estar ocorrendo.

Consegue mandar um exemplo do retorno de http://localhost:3000/listar?

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software