0

Eu tenho uma tabela Dinâmica, uso o TWIG para preencher os dados automaticamente, nessa tabela eu tenho em cada Linha 2 botões, um de Editar, e o Outro de excluir, quando eu clico no botão Editar Abro Um modal, eu gostaria de saber como eu faço para que os dados daquela linha especifica que foi clicado no botão de editar serem pre carregados nos inputs do modal, eu consigo preencher os dados usando JQuery, mas o problema é que só funciona pra Primeira Linha.

 <!-- MODAL EDIT UNIDADE -->
<div class="modal fade" tabindex="-1" role="dialog" id="edita_unidade">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
       </button>
      <h5 class="modal-title">Editar Unidade</h5>
    </div>
    <div class="modal-body">
      <form>
         <div class="row">
          <div class="col-lg-12">
        <div class="form-group">
              <label>CNPJ:</label>
               <input class="form-control" type="text" name="cnpj_" id="cnpj_">
            </div>
          </div>
        </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="form-group">
              <label>Nome Unidade:</label>
              <input class="form-control" type="text" name="unidade_" id="unidade_">
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button id="left_modal" type="button" class="btn btn-info pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Fechar</button>
       <button id="edit_unidade_modal" type="button" class="btn btn-success pull-right"><i class="fa fa-edit"></i> Atualizar</button>
    </div>
  </div>
</div>
</div>

 <table width="100%" class="table table-hover" id="unidades-grupo" referral="0" style="border-top: 0;">
                    <thead>

                        <tr>
                            <th>ID Unidade</th>
                            <th>Nome</th>
                            <th>CPF/CNPJ</th>
                            <th>Data Cadastro</th>
                            <th>ID Grupo</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                        <input type="hidden" id="id_unidade_dell" value="9">
                            <tr>
                                <td onclick="redirectUnidade('9')">9</td>
                                <td onclick="redirectUnidade('9')">Filial Redenção - 002</td>
                                <td onclick="redirectUnidade('9')">102938475657482</td>
                                <td onclick="redirectUnidade('9')">2019-01-17T19:03:11.000Z</td>
                                <td onclick="redirectUnidade('9')">1</td>
                                 <td style="text-align: center;"><i data-toggle="modal" data-target="#edita_unidade" cnpjUnidade="102938475657482"  nomeUnidade="Filial Redenção - 002" id="icon_edit_uni"  onclick="edit_unidade(9)" idUnidade='9' class="fa fa-edit editaGrupo"title="Editar Unidades"></i></td>
                                        <td style="text-align: center;"><i id="delete_uni" onclick="del_unidade(9)" class="fa fa-trash grupo-del"  title="Deletar Unidade"></i></td>
                            </tr>


                        <input type="hidden" id="id_unidade_dell" value="11">
                            <tr>
                                <td onclick="redirectUnidade('11')">11</td>
                                <td onclick="redirectUnidade('11')">Filial New York</td>
                                <td onclick="redirectUnidade('11')">66449484756</td>
                                <td onclick="redirectUnidade('11')">2019-01-19T22:12:20.000Z</td>
                                <td onclick="redirectUnidade('11')">1</td>
                                 <td style="text-align: center;"><i data-toggle="modal" data-target="#edita_unidade" cnpjUnidade="66449484756"  nomeUnidade="Filial New York" id="icon_edit_uni"  onclick="edit_unidade(11)" idUnidade='11' class="fa fa-edit editaGrupo"title="Editar Unidades"></i></td>
                                        <td style="text-align: center;"><i id="delete_uni" onclick="del_unidade(11)" class="fa fa-trash grupo-del"  title="Deletar Unidade"></i></td>
                            </tr>

                                                                          </tbody>
                </table>

<script>
function edit_unidade(id){
  $('#icon_edit_uni').on('click', function(){
    var nome = $(this).attr('nomeUnidade');
    // alert(nome);
    var cnpj = $(this).attr('cnpjUnidade');
    // alert(cnpj);
    $('#cnpj_').attr('value', cnpj);
    $('#unidade_').attr('value', nome);
    $('#edit_unidade_modal').attr('value', id);
  });
}
</script>

2
  • Não pode repetir id's, porque vai sempre pegar o primeiro. Os id's devem ser únicos. Utilize class em vez de id.
    – Sam
    Commented 19/01/2019 às 23:39
  • Carlos, fiz a reversão para editação 2 devido as edições alterarem o propósito inicial da pergunta.
    – NoobSaibot
    Commented 21/01/2019 às 23:03

1 Resposta 1

0

 $(document).on('click', '#icon_edit_uni', function(){
    var id = $(this).attr('idUnidade');
    var nome = $(this).attr('nomeUnidade');
    var cnpj = $(this).attr('cnpjUnidade');  
    $('#cnpj_').attr('value', cnpj); 
    $('#unidade_').attr('value', nome); 
    $('#edit_unidade_modal').attr('value', id);
  });

RESOLVIDO

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 .