Jump to content
Sapinn

Transferir dados de uma tabela para um form em js

Recommended Posts

Pessoa de novo eu aqui kk. Acho que essa pergunta é simples mas eu não sei como fazer, já pesquisei em vários cantos mas só achei a resposta em Jquery e eu queria fazer em Javascript puro. Basicamente eu gostaria de transferir dados de uma tabela para um form eu já consegui fazer mas só funciona em um td e eu gostaria nos outros não funcionam. 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px">
        <tr>
            <td>Nome</td>
            <td>Endereço</td>
            <td>Telefone</td>
            <td>Adicionar</td>
        </tr>
        <tr>
            <td id="nome_cliente" value="Sapien">Sapinn</td>
            <td id="endereco_cliente" value="Rua 01">Rua 01</td>
            <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 9999-9999</td>
            <td><button onclick="adicionar()">Adicionar</button></td>
        </tr>
        <tr>
            <td id="nome_cliente" value="Sapien">Supremo</td>
            <td id="endereco_cliente" value="Rua 01">Rua 05</td>
            <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 0000-0000</td>
            <td><button onclick="adicionar()">Adicionar</button></td>
        </tr>
    </table><br><br>
    Nome:<input type="text" name="nome" id="nome">
    Telefone: <input type="text" name="telefone" id="telefone">
    Endereço: <input type="text" name="endereco" id="endereco">

    <script>
        function adicionar(){
           
            let nome_cliente = document.getElementById("nome_cliente").innerHTML;
            let endereco_cliente = document.getElementById("endereco_cliente").innerHTML;
            let tel_cliente = document.getElementById("tel_cliente").innerHTML;

            document.getElementById('nome').value = nome_cliente;
            document.getElementById('telefone').value = tel_cliente;
            document.getElementById('endereco').value = endereco_cliente;

            console.log(nome_cliente, endereco_cliente, tel_cliente)
            
        }
    </script>
</body>
</html>

 

Share this post


Link to post
Share on other sites

Começando pelo principal problema que na verdade é: Vários erros em seu HTML.

O atributo global #ID deve ser único pois seu objetivo é distinguir alguma coisa de outra.

Portanto quando você declara vários:

9 horas atrás, Sapinn disse:

id="nome_cliente"

Entre os demais, você está cometendo um erro gravíssimo de interpretação e hierarquia no HTML por isso só funciona em um, porque só deveria existir em um.

Ou seja nunca repita o #ID com a mesma propriedade!

 

Você terá que construir algo que possa ser reaproveitado.

Antigamente nessas situações tínhamos que compor um objeto com todos os valores, mas desde o html5 a coisa ficou mais fácil, temos um novo atributo global que podemos buscar no documento e esse assim como diversos outros podem se repetir.

Então você só obtêm uma referencia única que pode ser um #ID para distinguir quais serão os elementos de busca.

 

Veja isso:

<table>
    <tr id="cliente-1"> <!-- ID "1" para o primeiro cliente -->
        <td data-nome="joão">João</td>
        <td data-endereco="endereço a">Endereço A</td>
        <td><button onclick="adicionar('cliente-1')">Adicionar</button></td>
    </tr>
    <tr id="cliente-2"> <!-- ID "2" para o segundo cliente -->
        <td data-nome="maria">Maria</td>
        <td data-endereco="endereço b">Endereço B</td>
        <td><button onclick="adicionar('cliente-2')">Adicionar</button></td>
    </tr>
</table>

Nome: <input type="text" name="nome" id="nome" />
Endereço: <input type="text" name="endereco" id="endereco" />

Perceba que definir os #ID diferente em cada coluna "tr" da table, e é assim que posso chegar até os atributos data que são meus alvos, apenas informando para a função o #id da coluna.

var nome = document.getElementById('nome'),
    endereco = document.getElementById('endereco'),
    tdNome = null,
    tdEndereco = null;

function adicionar(id_alvo) {
  var trID = document.getElementById(id_alvo);
  tdNome = trID.querySelector('[data-nome]').dataset.nome;
  tdEndereco = trID.querySelector('[data-endereco]').dataset.endereco;

  nome.value = tdNome;
  endereco.value = tdEndereco;
}

Basta que siga esse procedimento para adicionar mais campos como desejar.

 

 

Completando... sobre erros de HTML....

Toda tag deve ser fechada!

Mesmo que o browser percebe o erro e tenta corrigir, você pode se deparar com problemas na estrutura do documento, quanto mais problemas mais interpretações aleatórias pode acontecer pelo browser.

Portanto quando declarar uma tag <input> não se esqueça que ela deve ser fechada.

<input type="text" />

Mais de 90% dos problemas com css e javascript podem ser solucionados apenas escrevendo o html corretamente.

 

Dica de desempenho...

Evite criar variáveis dentro do escopo de uma função, porque consome uma certa % de memória RAM para criar, e apenas reescrever consome muitíssimo menos.

Evite ao máximo buscar por elementos dentro do escopo de um função, lembre-se que quando você passa um getElementById por exemplo o javascript deve ler todo o documento para encontrar esse alvo. Se ele já foi buscado e encontrado, não há necessidade de encontrar-lo novamente.

Mesmo que em diversos casos coisas como essas são indispensáveis, mas devem ser evitadas a todo custo.

 

Share this post


Link to post
Share on other sites

Cara muito obrigado mais uma vez, princialmente pelas dicas. Quero aproveitar o tópico e fazer mais uma pergunta quando eu for fazer uma ligação com o banco de dados mostrando a tabela de clientes e quiser colocar os dados de um cliente especifico eu posso incrementar o código, no caso PHP, com o javascript no botão ou isso seria uma má pratica? E se não for correto poderia me mostrar outra forma de fazer? Desde já grato

 

Exemplo:

<tr id="cliente-<?php echo $id_cliente?>"> 

            <td data-nome="<?php echo $nome_cliente?>">João</td>

            <td data-endereco="<?php echo $nome_endereco?> a">Endereço A</td>

            <td><button onclick="adicionar('cliente-<?php echo $id_cliente?>')">Adicionar</button></td>

        </tr>

Share this post


Link to post
Share on other sites
2 horas atrás, Sapinn disse:

com o javascript no botão ou isso seria uma má pratica?

Na verdade isso seria o caminho.

 

Me estranha que você montou a lógica corretamente, porque não estaria funcionando?

Talvez o uso de variáveis ao invés dos índices no resultado?

 

Bom... Resultados de querys no php sempre nos retornam um array independente da aplicação de busca seja PDO seja MySqli, então o que podemos é percorrer esse array e a cada índice criar os elementos:

<?php
$banco_de_dados = [
    ['id' => 0, 'nome' => 'Rio', 'endereco' => 'Rio de Janeio'],
    ['id' => 1, 'nome' => 'Paulo', 'endereco' => 'São Paulo'],
    ['id' => 2, 'nome' => 'Salvador', 'endereco' => 'Bahia'],
    ['id' => 3, 'nome' => 'Vitória', 'endereco' => 'Espirito Santo']
];
?>
<table>
    <?php foreach ($banco_de_dados as $value) { ?>
        <tr id="cliente-<?= $value['id'] ?>">
            <td data-nome="<?= $value['nome'] ?>"><?= $value['nome'] ?></td>
            <td data-endereco="<?= $value['endereco'] ?>"><?= $value['endereco'] ?></td>
            <td><button onclick="adicionar('cliente-<?= $value['id'] ?>')">Adicionar</button></td>
        </tr>
    <?php } ?>
</table>

 

Note que ao invés de usar a função echo do php toda hora apenas mandei exibir o valor usando <?= /* Algo a exibir */ ?> 

Share this post


Link to post
Share on other sites

Muito obrigado mais uma vez Omar. Quanto ao código que eu te perguntei eu ainda não incrementei era só uma dúvida mesmo. Embora eu tenha terminado recentemente minha faculdade na área de T.I e educação ela não fez há cobrança necessária para que eu pudesse me desenvolver bem na programação, e isso é bem tipico das faculdade na área de tecnologia, enfim, estou fazendo diversos cursos para me aprimorar e peguei um freelar para desenvolver um pequeno site para um amigo meu então provavelmente eu vou aparecer muito por aqui criando dúvidas bobas kkkk. 

Mais um vez muito obrigado!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By cmoreira1300
      Meu programa não consegue identificar o dotenv na middleware
      Eu estava fazendo um CRUD simples, implementei o dotenv no meu programa, está funcionando quando faço a conexão com o banco de dados e a inserção e uma função normal,  mais quando vou fazer isso dentro de uma middleware ele não chama meu dotenv, só funciona quando tiro o process.env e ponho as informações direto na função de conexão.
      require( 'dotenv' ).config( { path: '../../.env' } ) const mysql = require( 'mysql2' ) // DESSA FORMA NÃO FUNCIONA const connection_pool = mysql.createPool( { host: process.env.DB_HOST, user: process.env.DB_USER, database: process.env.DB_DATABASE, password: process.env.DB_PASS } ) // DESSA FORMA FUNCIONA // const connection_pool = mysql.createPool( { // host: 'localhost', // user: 'carlos', // database: 'simple_crud', // password: 'pass1241' // } ) module.exports = connection_pool.promise() INSERÇÃO NO BANCO DE DADOS
      const db_conn = require( '../db/connection' ) const createNewClient = ( name ) => { return db_conn.execute( `INSERT INTO client ( name ) values (?)`, [ name ] ) } module.exports = { createNewClient } FAZENDO A INSERÇÃO NO MIDDLEWARE
      const data = require( '../data/client' ) const createClient = ( req, res, next ) => { const client = req.body.name data.createNewClient( client ) .then( () => { res.status( 200 ).json( { 'status': 'sucess', 'client': client } ) } ) .catch( ( err ) => { res.status( 404 ).json( { status: 'error', error: err } ) } ) .finally( () => { next() } ) } module.exports = { createClient } { "status": "error", "error": { "message": "Access denied for user ''@'localhost' (using password: YES)", "code": "ER_ACCESS_DENIED_ERROR", "errno": 1045, "sqlState": "28000", "sqlMessage": "Access denied for user ''@'localhost' (using password: YES)" } }  Esse é o erro que obtenho quando uso o dotenv, lenbrando que as informações de login estão todas certas, e que em outra função que não seja um middleware funciona.
    • By Felipe Guedes Coutinho
      Galera, estou precisando ler 1 arquivo TXT mas não quero usar nenhum INPUT para carregar o arquivo.
       
      Eu tenho uma estrutura de pasta onde os meus arquivos TXT ficaram fisicamente e no meu código HTML + JS quero que ao alterar um SELECT OPTION, através da escolha eu validar se o arquivo com o nome selecionado existe na página e se existir eu ler ele e adicionando em um elemento qualquer, uma DIV como conteúdo ou dentro de uma TEXTAREA.
       
      Vou montar a estrutura de pasta abaixo e colocar imagens de exemplo:
       
      Estrutura de pasta
      projeto
          index.html
          dclgen <-- Aqui dentro tenho vários arquivos do formato TXT
              t1.txt
              t2.txt
              t3.txt
              ...
              t4.txt
       
      Pasta DCLGEN dentro da pasta projeto e a pasta DCLGEN junto com o arquivo HTML

       
      Ao escolher no SELECT o nome T1 quero que o JavaScript veja se o arquivo t1.txt existe e se existir quero LER o conteúdo dele e jogar em um ELEMENTO HTML.

       
      Preciso fazer isso da forma mais "SIMPLES" possível usando HTML e JavaScript.
       
      Alguém pode dar um help? Pesquisei no Google muitas opções e os códigos encontrados não me atenderam.
       
      Não quero ser obrigado a fazer um "UPLOAD" usando um INPUT do TIPO FILE, quero usar algo já dentro da pasta do projeto.
      <!DOCTYPE html> <html> <head> <title>Read Text File Tutorial</title> </head> <body> <input type="file" onchange="loadFile(this.files[0])"> <br> <pre id="output"></pre> <script> async function loadFile(file) { let text = await file.text(); document.getElementById('output').textContent = text; } </script> </body> </html> Código usando FileReader, mas que também está usando um INPUT como estimúlo, não é o que quero.
      document.getElementById('file').onchange = function(){ var file = this.files[0]; var reader = new FileReader(); reader.onload = function(progressEvent){ var fileContentArray = this.result.split(/\r\n|\n/); for(var line = 0; line < lines.length-1; line++){ console.log(line + " --> "+ lines[line]); } }; reader.readAsText(file); }; Encontrei esse código também, mas não consegui usar...
      Esse é o parâmetro passado na url "https://dicasdejavascript.com.br/exemplo.txt" function lerURL(URL) { var http = new XMLHttpRequest(); http.open("GET", URL, false); http.send(); console.log(http.responseText); } Espero que alguém consiga me ajudar...
       
      Desde já agradeço.
       
      Atenciosamente.
      Felipe Coutinho

    • By Giovanird
      Ola!
      Tenho uma lista de usuários e um link que abre uma div que mostra os detalhes deste usuario, este link usa o evento onClick do javascript.
      O problema é que quando clicado para abrir a div, a tela sobe para o inicio do topo.
      Preciso que a tela nao faça a rolagem para o topo e sim que fique na posição da lista.
      Segue meu codigo abaixo.
      Obrigado por momento
       
      <div class="container"> <div class="row"> <?php foreach para listar os usuários.... ?> <div class="col-10"> Nome do usuário </div> <div class="col-2"> <a href="#" onClick="Mudarestado('minhaDiv<?=$cod?>')"><img src="icons/chevron-right.svg"></a> </div> *** Parte ficará visivel ao clicar no link OnClick *** <div class="divacoes" id="minhaDiv<?=$cod?>" style="display:none"> <div class="row"> <div class="col"> ... dados dos usuarios... </div> </div> </div> *** **** <?php fim foreach que gera a lista de usuários... ?> </div> </div> <style> .divacoes { background-color: #64A338; border: none; padding: 20px; width: 97%; height: 80px; } </style> <script> function Mudarestado(el) { var display = document.getElementById(el).style.display; if (display == "none") document.getElementById(el).style.display = 'block'; else document.getElementById(el).style.display = 'none'; } </script>  
    • By Rafael Massula
      Boa noite pessoal, 
      Tenho o seguinte código em .Net que faz a comparação de uma senha que foi criptografada e salva no banco com a senha comum que o usuário conhece. O algoritmo que desenvolvi foi esse da image.png porem preciso converter essa verificação para JavaScript pela seguinte necessidade, será uma aplicação em electron e ela poderá funcionar offline então não terei como mandar a verificação para o servidor. Existe alguma possibilidade? Desde já agradeço. 

    • By Caio Vargas
      fala pessoal tudo bem
      eu avia postado algo aqui mais so tive uma simples resposta ...
       
      uma cliente pediu pra eu criar um sistema de agendamento de serviços pra ela
      atualmente ela mora no canada e estou desenvolvendo um site pra ela
      eu  etou com uma grande duvida .... como posso cadastrar dadas continuas .... no sistema
       
      tipo se eu cadastrar um serviço de barbeiro e colocar uma data e um horario esse serviço tem que valer para segunda terça quarta quinta sexta sabado e domingo e todos os meses
      como posso fazer isso em php
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.