Button to edit table on click

Question

I am trying to edit the information that has in the columns of my table, when I click on the edit button it opens a modal and already pulls the information of that line in specific, what I am trying to do is that when I change the information and click on record (inside the modal) he edits the line. How can I do that?

My 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 from 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>

Answer 1

I suggest that you use AJAX to make asynchronous requests, that is to say, by clicking on the modal pull the information directly from the database and by clicking save do an update in the database of the line in question.

Example of Ajax code that might be useful for you.

<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>

Any questions just ask.