Put table column value in an input

Question

Put table column value in an input

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I have a table with 4 columns and multiple 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 it 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>

php javascript html

asked by anonymous 23.07.2016 / 21:04

2 answers

2

A simpler way to do this (assuming jQuery is an option) is to use the % jQuery% , which returns in the tree .closest() and selects the next parent element according to the 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><inputtype="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:

No% password% changed from DOM to input ;
Added to the field that we want to copy the contents of the line to class="senha" ;
Added copy button to id="senha" class="target-copy" ;
Added jQuery library;
Added code class to function "copiar" on button.

25.07.2016 / 14:28

Relationship Laravel 5.2 Eloquent Perform insert into C # List [closed]

score 1 · Accepted Answer

Here's 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 the simplest, mapping all elements of the table I use with unique ids, so I can know that the button of that row was selected and then fill in the fields with the value of that column. I have edited the code to work without the database so that the other members can also test.