Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>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>>
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 */ ?>**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!
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: