Place table column value in an input

Question

I have a table with 4 columns and several records. In this same table I have a button for each record.

By clicking this button I would like to take the value of a column and put in an inputText.

Code:

    <input type="text" class="senha">
    <table class="table table-striped">
        <thead>

                <tr>
                    <th>#</th>
                    <th>Mês/Ano</th>
                    <th>Senha</th>
                    <th>Máquina</th>
                    <th>Validade</th>
                </tr>

        </thead>
        <tbody>
            <?php
            $i = 0;

            while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) {
                $i += 1;
                ?>
                <tr>
                    <td><?php echo $i; ?></td>
                    <td><?php echo mes_extenso($linha['mes']) .'/' .$linha['ano']; ?></td>                            
                    <td><?php echo $linha['senha_mensal']; ?></td>
                    <td><?php echo $linha['nome_maquina']; ?></td>
                    <td><?php echo date('d/m/Y', strtotime($linha['validade'])); ?></td>
                    <td class="text-center"><a class='btn btn-info btn-xs'><span class="glyphicon glyphicon-edit"></span> Copiar
                        <?php $linha['senha_mensal']; ?> </a></td>
                <?php } ?>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

A simpler way to do this (assuming jQuery is an option) is to use the method .closest() jQuery, that returns in the tree DOM and selects the next parent element as selector.

Something similar to this (functional example):

$(function() {
  $('.copiar').click(function(event) {
    var copyValue =
      // inicia seletor jQuery com o objeto clicado (no caso o elemento <a class="copiar">)
      $(event.target)
      // closest (https://api.jquery.com/closest/) retorna o seletor no tr da linha clicada 
      .closest("tr")
      // procura a <td> com a class target-copy
      .find("td.target-copy")
      // obtem o text no conteúdo do elemento <td>
      .text()
      // remove possiveis espaços no incio e fim da string
      .trim();

    // seleciona o input com id=senha
    $('#senha')
      // seta o valor copiado para o input id=senha
      .val(copyValue);
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="senha">
<div>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>Mês/Ano</th>
        <th>Senha</th>
        <th>Máquina</th>
        <th>Validade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          1
        </td>
        <td>
          01/2016
        </td>
        <td class="target-copy">
          123456#1
        </td>
        <td>
          maquina1
        </td>
        <td>
          30/01/2016
        </td>
        <td class="text-center"><a class='btn btn-info btn-xs copiar'><span class="glyphicon glyphicon-edit"></span> Copiar</a>
        </td>
      </tr>
      <tr>
        <td>
          2
        </td>
        <td>
          02/2016
        </td>
        <td class="target-copy">
          123456#2
        </td>
        <td>
          maquina2
        </td>
        <td>
          30/02/2016
        </td>
        <td class="text-center"><a class='btn btn-info btn-xs copiar'><span class="glyphicon glyphicon-edit"></span> Copiar</a>
        </td>
      </tr>
      <tr>
        <td>
          3
        </td>
        <td>
          03/2016
        </td>
        <td class="target-copy">
          123456#3
        </td>
        <td>
          maquina3
        </td>
        <td>
          30/03/2016
        </td>
        <td class="text-center"><a class='btn btn-info btn-xs copiar'><span class="glyphicon glyphicon-edit"></span> Copiar</a>
        </td>
      </tr>
      <tr>
        <td>
          4
        </td>
        <td>
          04/2016
        </td>
        <td class="target-copy">
          123456#4
        </td>
        <td>
          maquina4
        </td>
        <td>
          30/04/2016
        </td>
        <td class="text-center"><a class='btn btn-info btn-xs copiar'><span class="glyphicon glyphicon-edit"></span> Copiar</a>
        </td>
      </tr>
      <tr>
        <td>
          5
        </td>
        <td>
          05/2016
        </td>
        <td class="target-copy">
          123456#5
        </td>
        <td>
          maquina5
        </td>
        <td>
          30/05/2016
        </td>
        <td class="text-center"><a class='btn btn-info btn-xs copiar'><span class="glyphicon glyphicon-edit"></span> Copiar</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Example also in jsFiddle.

Changes to your original code:

• In the input password, has been changed from class="senha" for id="senha";
• Added to the field we want to copy the contents of the line to class="target-copy";
• Added copy button to class "copiar";
• Added jQuery library;
• Added code javascript for the function of click on the button.

Answer 2

Follows the answer:

<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Example Table Jquery</title>
        <link rel='stylesheet' href="bootstrap/css/bootstrap.min.css"/>
    </head>

    <body>
        <div class='row'>
            <div class='col-md-3 panel panel-body'>
                <form class='form' id='myForm' method='post'>
                    <label>ID:</label>
                    <input name='id' type='text' class='form-control' placeholder='ID' />

                    <label>Mês/Ano:</label>
                    <input name='mesano' type='text' class='form-control' placeholder='Mês/Ano' />

                    <label>Senha:</label>
                    <input name='senha' type='text' class='form-control' placeholder='Senha' />

                    <label>Máquina:</label>
                    <input name='maquina' type='text' class='form-control' placeholder='Máquina' />

                    <label>Validade:</label>
                    <input name='validade' type='datetime' class='form-control' placeholder='Validade' />

                    <hr>

                    <input class='btn btn-sm btn-info' type='reset' value='Limpar' />
                </form>
            </div>

            <div class='col-md-9'>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Mês/Ano</th>
                            <th>Senha</th>
                            <th>Máquina</th>
                            <th>Validade</th>
                        </tr>
                    </thead>
                    <tbody class='dados'>
                        <?php
                        $i = 0;
                        while ($i < 5) {
                            $i += 1;
                            ?>
                            <tr id="r<?php echo $i ?>">
                                <td class='id'><?php echo $i; ?></td>
                                <td  class='mesano'><?php echo "mes/ano - {$i}"; ?></td>                            
                                <td><?php echo "senha - {$i}"; ?></td>
                                <td><?php echo "maquina - {$i}" ?></td>
                                <td><?php echo "validade - {$i}" ?></td>
                                <td class="text-center">
                                    <a id="<?php echo $i ?>" class='btn btn-info btn-xs copiar'><span class="glyphicon glyphicon-edit"></span>Copiar</a>
                                </td>
                            <?php } ?>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <script src='jquery.min.js'></script>
        <script src='bootstrap/js/bootstrap.min.js'></script>
        <script>
            $(function()
            {
                $('.copiar').click(function()
                {
                    var id = this.id;
                    $('input[name = id]').val( $('#r' + id + ' td:nth-child(1)').text() );
                    $('input[name = mesano]').val( $('#r' + id + ' td:nth-child(2)').text() );
                    $('input[name = senha]').val( $('#r' + id + ' td:nth-child(3)').text() );
                    $('input[name = maquina]').val( $('#r' + id + ' td:nth-child(4)').text() );
                    $('input[name = validade]').val( $('#r' + id + ' td:nth-child(5)').text() );

                });
            });
        </script>
    </body>
</html>

There are several ways to do this, I made it from the simplest, mapping all table elements I use with unique ids, so I can know that the button of that row was selected and then fill the fields with the value of that column. I edited the code to work without the database so that other members also have test condition.