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>