Para melhorar a interatividade e usabilidade de um site ou aplicativo da web, permite aos usuários clicar em uma célula específica de uma tabela HTML e ver instantaneamente o valor dessa célula em um campo de entrada de formulário facilita bastante a entrada de dados e a manipulação de informações.
Linhas do Código
Abaixo vai o exemplo que usei em meus testes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário com Botões</title>
</head>
<body>
<h1>Formulário </h1>
<form action="processar.php" method="post">
<input type="text" name="valor" id="meuvalor">
<br>
<button type="submit" name="operacao" value="depositar">Depositar</button>
</form>
<h1>Tabela</h1>
<table id="tabela">
<tr>
<td>Item 1</td>
<td>Valor 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Valor 2</td>
</tr>
</table>
<script>
// Obtém a referência para a tabela
var tabela = document.getElementById("tabela");
// Obtém a referência para o campo de entrada
var campoInput = document.getElementById("meuvalor");
// Adiciona um evento de clique à tabela
tabela.addEventListener("click", function(event) {
// Verifica se o clique ocorreu em uma célula da tabela
if (event.target.tagName === "TD") {
// Obtém o texto da célula clicada
var valorClicado = event.target.textContent;
// Atualiza o valor do campo de entrada
campoInput.value = valorClicado;
}
});
</script>
</body>
</html>
Fazendo o clique funcionar em apenas uma coluna
Se prestar atenção verá que o campo input pega o valor de qualquer célula da tabela. Podemos usar o código abaixo para limitar à apenas uma coluna.
Nesse exemplo, tenho uma coluna com o id=”coluna1″
<script>
// Obtém a referência para a tabela em corpo01.php
var tabela = document.getElementById("tabela_principal");
// Obtém a referência para o campo de entrada em index.php
var campoInput = document.getElementById("id01");
// Adiciona um evento de clique à tabela
tabela.addEventListener("click", function(event) {
// Verifica se o clique ocorreu na coluna desejada (com o ID "coluna1")
if (event.target.tagName === "TD" && event.target.closest('#coluna1')) {
// Obtém o texto da célula clicada
var valorClicado = event.target.textContent;
// Atualiza o valor do campo de entrada
campoInput.value = valorClicado;
}
});
</script>
a verificação event.target.closest('#coluna1') garante que o clique ocorra dentro de um elemento com o ID “coluna1”. Se o clique ocorrer em uma célula de outra coluna ou em qualquer outro lugar da tabela, a função não será executada.