0

Eu estou tentando editar a informação que tem nas colunas da minha tabela, quando eu clico no botão de editar ele abre um modal e ja puxa a informação daquela linha em especifico, o que eu estou tentando fazer é que quando eu alterar a informação e clicar em gravar (dentro do modal) ele edite a linha. Como eu posso fazer isso?

Meu js:

$(".row").click(function(){

                 var Cdgrupo = $("#Cdgrupo").val();
                 var Grupo = $("#Grupo").val();

                 var markup = "<tr><td contenteditable='false'>" + Cdgrupo + "</td><td>" + Grupo + "</td>'<td><button type='button' class='editbtn btn btn-info' data-toggle='modal' data-target='#myModal' title='Alterar Grupo'><i class='fa fa-edit'></i></button><button type='button' class='btn btn-danger' title='Excluir Grupo' style='right:-4px; position:relative;'><i class='fa fa-times'></i></button></td>';</tr>";

                 $("table tfoot").append(markup);

             }); 


                    //botão editar
                 $('.table').on("click", ".editbtn", function(){
    $("#Cdgrupoedit").val(getLineColumn($(this), 0));
    $("#grupoedit").val(getLineColumn($(this), 1));
  });

  function getLineColumn(element, index){
    return element.parents('tr').find('td').eq(index).text()
  }
});

HTML da modal:

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

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" style="background-color:#C25C40; color:white;  border-bottom: 0 none; height:45px;">
        <h5 class="modal-title" style="top:10px;position:absolute;">Alterar Código/Grupo</h5>
    </div>
    <div class="modal-body" style="background-color:#262626;">
    <input type="text" placeholder="Código" id="Cdgrupoedit">
    <input type="text" placeholder="Grupo" id="grupoedit">
        </div>



      <div class="modal-footer" style="height:170px; background-color:#262626;border-top: 0 none;">
        <button type="button"  class="editsavebtn btn btn-success" id="modalgravar" >Gravar</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="modalfechar" >Voltar</button>

      </div>
    </div>

  </div>
</div>

1 Resposta 1

2

Sugiro que utilize AJAX, para fazer requisições assíncronas, ou seja ao clicar no modal puxar as informações direto do banco de dados e ao clicar em salvar fazer um update no banco da linha em questão.

Exemplo de código Ajax que pode se útil pra vc.

<script type="text/javascript">
    $.ajax({
        type: "POST",
        data: $("#formulario").serialize(),
        url: "link/com/php/que/faz/update.php",
        success: function(){
            alert("Alteração realizada com sucesso!");
        }
    });
</script>

Qualquer dúvida só perguntar.

3
  • Perdão a demora Vinicius, com esse código que vc colocou eu salvaria a edição no database no caso correto? Primeiro o que eu estou tentando é ao clicar no botão ''Gravar'' aconteça o update naquela linha na própria tela mesmo. Commented 25/04/2019 às 15:11
  • Achei que a intenção fosse salvar os dados do update tbm, não só editar uma linha. Commented 25/04/2019 às 17:41
  • Por enquanto eu só quero que a edição aconteça na tela e na linha que eu chamei o botão de editar Commented 25/04/2019 às 18:04

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 .