How to Fill Only Selected Input

3

I'm having a problem popping up a field inside a table that is within a loop For , and one of the titles in this table is a modal, button as it is clicked opens a selection of units of measure . And when the user selects the drive, the input field is populated, but as I define an array it fills the entire table. Like the picture below. Is there a way to fill only the selected input, or just give a focus in a single instead of all?

<scripttype="text/javascript">
$(function(){
   var prevFocus; //Escopo global

   //Ao selecionar a unidade de medida o último input focado será preenchido!
   $("#unidadeMedida").on("change", function(){
      if (typeof prevFocus  !== "undefined") {
         prevFocus.val($(this).val());
      }
   });

   $(".inputTabela").focus(function() {
      prevFocus = $(this);
   });
});
</script>

<div class="modal fade" id="myModaler" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <label class="modal-title">Cadastro de Unidades de Medida</label>
            </div>
            <div class="modal-body">
                <table class="display example" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>  Unidade </th>
                            <th>  Descrição </th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php
                        include ("conn.php");

                        $result = "SELECT * FROM cadunid ORDER BY descricao";
                        $resultado = mysqli_query($conn, $result);

                        while($row = mysqli_fetch_assoc($resultado)) {
                            echo "<tr class='btn-default id='unidadeMedida'>";
                                echo "<td class='get-value'>". $row['codigo'] ."</td>";
                                echo "<td class='get-value-codigo'>". $row['descricao'] ."</td>";
                            echo "</tr>";
                        }                      
                    ?>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
          <th>
            <button type="button" id='unidadeMedida' class="" data-toggle="modal" data-target="#myModaler">Unidade >></button>
          </th>
          <th>Preço Custo</th>
          <th>Preço Venda</th>
          <th>Peso Bruto</th>
          <th>Peso Liquido</th>
          <th>Qtd. Emb.</th>
        </tr>
    </thead>
    <tbody id='prprod'><!-- Início do Corpo da tabela / Quantidade de linhas e colunas -->
        <?php for($i = 0; $i <= 5; $i++){ // loop para criar 5 linhas na tabela ?>        
        <tr>                                                   
            <input type="hidden" maxlength="6"  name="recnum[]" style="border:none; width:100%; background-color: transparent;">
            <td><input type='text' class='inputTabela' name="unidad[]" style="border:none; width:100%; background-color: transparent;">                                                               
            <td><input type="text" class='' maxlength=""  name="preco_custo[]" placeholder="" style="border:none; width:100%; background-color: transparent;"></td>
            <td><input type="text" class='' maxlength=""  name="preco_venda[]" placeholder="" style="border:none; width:100%; background-color: transparent;"></td>
            <td><input type="text" class='' maxlength=""  name="peso_bruto[]" placeholder="" style="border:none; width:100%; background-color: transparent;"></td>
            <td><input type="text" class='' maxlength=""  name="peso_liquido[]" placeholder="" style="border:none; width:100%; background-color: transparent;"></td>
            <td><input type="text" class='' maxlength=""  name="qtde_embalagem[]" placeholder="" style="border:none; width:100%; background-color: transparent;"></td>
        </tr>
           <?php } ?>
    </tbody><!-- Fim do Corpo da tabela / Quantidade de linhas e colunas -->
</table>
    
asked by anonymous 27.11.2017 / 20:46

1 answer

1

So I understand you want to manipulate the last element in focus before clicking the modal button.

To do this I have added a classe to all% w_that I want to observe, every time one of these input is focused I store the element's reference in the prevFocus variable, so whenever the unit of measurement is changed the last focused input will get its the selected value , see the example below:

var prevFocus; //Escopo global


//Ao selecionar a unidade de medida o último input focado será preenchido!
$("#unidadeMedida").on("change", function(){
  if (typeof prevFocus  !== "undefined") {
     prevFocus.val($(this).val());
  }
});

$(".inputTabela").focus(function() {
    prevFocus = $(this);
});
table tr td {
  border: solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>
        <button type="button" id="modalUnidade" class="" data-toggle="modal" data-target="#myModal">Unidade >></button>
      </th>
      <th>Preço Custo</th>
      <th>Preço Venda</th>
      <th>Peso Bruto</th>
      <th>Peso Liquido</th>
      <th>Qtd. Emb.</th>
    </tr>
  </thead>
  <tbody id='prprod'>
    <tr>              
      <td>
        <input type="hidden" maxlength="6"  name="recnum[]" style="border:none; width:100%; background-color: transparent;">

        <input type='text' class="inputTabela" name="unidad[]" class="unidade-input" style="border:none; width:100%; background-color: transparent;">       </td>
      <td><input type="text" class="inputTabela" maxlength=""  name="preco_custo[]" placeholder="" style="border:none; width:100%; background-color: transparent;">
      </td>
      <td><input type="text" class="inputTabela" maxlength=""  name="preco_venda[]" placeholder="" style="border:none; width:100%; background-color: transparent;">
      </td>
      <td><input type="text" class="inputTabela" maxlength=""  name="peso_bruto[]" placeholder="" style="border:none; width:100%; background-color: transparent;">
      </td>
      <td><input type="text" class="inputTabela" maxlength=""  name="peso_liquido[]" placeholder="" style="border:none; width:100%; background-color: transparent;">
      </td>
      <td><input type="text" class="inputTabela" maxlength=""  name="qtde_embalagem[]" placeholder="" style="border:none; width:100%; background-color: transparent;">
      </td>
    </tr>
    <tr>              
      <td>
        <input type="hidden" maxlength="6"  name="recnum[]" style="border:none; width:100%; background-color: transparent;">

        <input type='text' class="inputTabela" name="unidad[]" class="unidade-input" style="border:none; width:100%; background-color: transparent;">       </td>
      <td><input type="text" class="inputTabela" maxlength=""  name="preco_custo[]" placeholder="" style="border:none; width:100%; background-color: transparent;">
      </td>
      <td><input type="text" class="inputTabela" maxlength=""  name="preco_venda[]" placeholder="" style="border:none; width:100%; background-color: transparent;">
      </td>
      <td><input type="text" class="inputTabela" maxlength=""  name="peso_bruto[]" placeholder="" style="border:none; width:100%; background-color: transparent;">
      </td>
      <td><input type="text" class="inputTabela" maxlength=""  name="peso_liquido[]" placeholder="" style="border:none; width:100%; background-color: transparent;">
      </td>
      <td><input type="text" class="inputTabela" maxlength=""  name="qtde_embalagem[]" placeholder="" style="border:none; width:100%; background-color: transparent;">
      </td>
    </tr>
  </tbody>
</table>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Unidades de medida</h4>
      </div>
      <div class="modal-body">
        <select id="unidadeMedida">
          <option value="">Selecione</option>
          <option value="cm">Centímetros</option>
          <option value="m">Metros</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="fecharModal">Close</button>
      </div>
    </div>

  </div>
</div>
    
27.11.2017 / 21:11