0

Estou quero o usuario ao clicar em um botão, os valores da linha correspondente ao botão, tabela sejam inseridos dentro de um imput. Mas o pelo script que fiz ele esta inserindo apenas o primeiro valor da tabela, pois quando clico no segundo ele inseri o primeiro.

OBS: os valores da tabela estou puxando do banco de dados.

Segue meu PHP tabela:

<?php
    require_once("classes/conecta.php");
    $conectando = new CONEXAO();
    $resposta = $conectando->Consulta("SELECT * FROM clientes_cli");
?>
<br>
<table >
    <thead>
        <tr>
            <td width="40px"><b>Nome</b></td>
            <td width="550px"><b>Sobrenome</b></td>
        </tr>
    </thead>
    <tbody> 
        <?php while ($inte = mysqli_fetch_assoc($resposta)) : ?>
        <tr>
        <td id="nome_lin">
       <?php echo $inte['nome_cli']; ?>
            </td>
            <td id="sobrenome_lin">
                <?php echo $inte['sobrenome_cli']; ?>
            </td>
            <td>
            <button onclick="alimentarCampo()" class="btn btn-primary">Alterar</button>
            </td>
        </tr>
        <?php endwhile; ?>
    </tbody>
</table>


Segue meu PHP os imputs:

    <form method="post" action="classes/consulta.php">
    <div class="row">
    <div class="col-6">
        <div class="form-group">
            <label>Nome</label>
            <input type="text" id="nome_input" class="form-control" name="nome">
        </div>
        </div>
        </div>
        <div class="row">
        <div class="col-6">
        <div class="form-group">
            <label>Sobrenome</label>
            <input type="text" class="form-control" id="sobrenome_input" name="sobrenome">
        </div>
        <button type="submit" class="btn btn-primary">Adicionar</button>
        <button type="submit" class="btn btn-primary">Alterar</button>
        <button type="submit" class="btn btn-primary">Excluir</button>
        </div>
        </div>
    </form>

Segue tambem meu javascript:

function alimentarCampo() {
var nome_do_cliente = document.getElementById("nome_lin");
var sobrenome_do_cliente = document.getElementById("sobrenome_lin");
document.getElementById("nome_input").value = nome_do_cliente.innerText;
document.getElementById("sobrenome_input").value = sobrenome_do_cliente.innerText;

}

2 Respostas 2

2

O problema em seu código está em usar o mesmo id para todas as linhas da tabela, quando for trabalhar com id, utilize os id's únicos para poder manipular os elementos. No seu caso eu não vejo a necessidade de manipular esses id's, uma vez que seus campos são escritos via php e já estão expostos na tela, creio que possa enviar os dados por parâmetro para a função javascript. Com as alterações, ficaria da seguinte forma:

<?php
    require_once("classes/conecta.php");
    $conectando = new CONEXAO();
    $resposta = $conectando->Consulta("SELECT * FROM clientes_cli");
?>
<br>
<table >
    <thead>
        <tr>
            <td width="40px"><b>Nome</b></td>
            <td width="550px"><b>Sobrenome</b></td>
        </tr>
    </thead>
    <tbody> 
        <?php while ($inte = mysqli_fetch_assoc($resposta)) : ?>
            <tr>
                <td> //Removido o id, não vamos mais precisar dele
                    <?php echo $inte['nome_cli']; ?>
                </td>
                <td> //Removido o id, não vamos mais precisar dele
                    <?php echo $inte['sobrenome_cli']; ?>
                </td>
                <td>
                    <button onclick="alimentarCampo(<?php echo $inte['nome_cli']; ?>, <?php echo $inte['sobrenome_cli']; ?>)" class="btn btn-primary">Alterar</button>//adicionado o nome_cli e sobrenome_cli como parâmetro
                </td>
            </tr>
        <?php endwhile; ?>
    </tbody>
</table>

E no javascript:

function alimentarCampo(nome_do_cliente , sobrenome_do_cliente ) { //recebemos o parâmetro
    //var nome_do_cliente = document.getElementById("nome_lin");
    //var sobrenome_do_cliente = document.getElementById("sobrenome_lin");
    //document.getElementById("nome_input").value = nome_do_cliente.innerText;
    //document.getElementById("sobrenome_input").value = sobrenome_do_cliente.innerText;
    document.getElementById("nome_input").value = nome_do_cliente;
    document.getElementById("sobrenome_input").value = sobrenome_do_cliente;
}
1

Acontece que existem vários elementos com o ID repetido, e o document.getElementById acessará o primeiro elemento que ele encontrar com o id passado. Uma saída é tornar esse id dinâmico, utilizando o ID do campo na tabela do banco de dados, por exemplo:

Tabela:

<?php
    require_once("classes/conecta.php");
    $conectando = new CONEXAO();
    $resposta = $conectando->Consulta("SELECT * FROM clientes_cli");
?>
<br>
<table >
    <thead>
        <tr>
            <td width="40px"><b>Nome</b></td>
            <td width="550px"><b>Sobrenome</b></td>
        </tr>
    </thead>
    <tbody> 
        <?php while ($inte = mysqli_fetch_assoc($resposta)) : ?>
        <tr>
        <!-- O id dessa coluna se torna nome_lin_IdDoCampoNoBanco -->
        <td id="nome_lin_<?php echo $inte['id']; ?>">
       <?php echo $inte['nome_cli']; ?>
            </td>
        <!-- Similarmente, o id dessa se torna sobrenome_lin_IdDoCampoNoBanco -->
            <td id="sobrenome_lin_<?php echo $inte['id']; ?>">
                <?php echo $inte['sobrenome_cli']; ?>
            </td>
            <td>
            <button onclick="alimentarCampo(<?php echo $inte['id']; ?>)" class="btn btn-primary">Alterar</button>
            </td>
        </tr>
        <?php endwhile; ?>
    </tbody>
</table>
<br>

JavaScript

function alimentarCampo(id) {
    var nome_do_cliente = document.getElementById("nome_lin" + id);
    var sobrenome_do_cliente = document.getElementById("sobrenome_lin" + id);
    document.getElementById("nome_input").value = nome_do_cliente.innerText;
    document.getElementById("sobrenome_input").value = sobrenome_do_cliente.innerText;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .