Eu tenho uma tabela cujo o conteudo dela vem de um servidor, em jSON. Cada linha da tabela possui um numero de código, um nome de produto e um botão de editar, ao clicar nesse botão de editar abre uma modal onde tem duas caixas de texto de codigo e produto. O que eu estou tentando fazer é que quando eu clicar no botão de editar o modal abra com as caixas de texto ja preenchidas com as informações da respectiva linha e que, ao mudar e clicar no botão de salvar de dentro da modal, aconteça a edição do conteudo naquela linha. Como posso fazer isso?
Esse é o meu HTML:
<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" onclick="editRow();" class="btn btn-success" data-dismiss="modal" id="modalgravar" >Gravar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" id="modalfechar" >Voltar</button>
<input type="hidden" name="employee_id" id="employee_id"/>
</div>
</div>
</div>
</div>
<div class="card-body" style="background-color:#262626">
<form method="post" id="tableform">
<table class="table table-bordered" id="dataTable">
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
</form>
</div>
</div>
</div>
Esse é o meu JS para criar uma nova linha na tabela:
$(".row").click(function(){
var Cdgrupo = $("#Cdgrupo").val();
var Grupo = $("#Grupo").val();
var markup = "<tr><td>" + Cdgrupo + "</td><td>" + Grupo + "</td>'<td><button type='button' id='btneditar' class='btneditar 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);
});
Esse é o JS para puxar o conteudo do servidor:
$(function(){
$.ajax({
url: "http://xxx/datasnap/rest/xxx/xxx/",
dataType: 'json',
type: 'get',
cache:false,
success: function(data){
var event_data = '';
//começo da tabela
event_data += '<thead>';
event_data += '<tr style="color:white">';
event_data += '<th width="10%">Código</th>';
event_data += '<th>Grupo</th>';
event_data += '<th width="15%">Ação</th>';
event_data += '</tr>';
event_data += '</thead>';
//final da tabela
//conteudo da tabela vindo da url
$.each(data, function(index, value){
event_data += '<tr>';
event_data += '<td>'+value.Cdgrupo+'</td>';
event_data += '<td>'+value.Grupos+'</td>';
event_data += '<td><button type="button" class="editbtn btn btn-info mesmo-tamanho" data-toggle="modal" data-target="#myModal" title="Alterar Grupo"><i class="fa fa-edit"></i></button><button type="button" class="btn btn-danger mesmo-tamanho" title="Excluir Grupo" style="right:-4px; position:relative;"><i class="fa fa-times"></i></button></td>';
event_data += '</tr>';
});
$('#dataTable').css({'color':'white'});
$("#dataTable").append(event_data);
},
//aviso de erro caso o conteudo da tabela não seja carregado
error: function(d){
alert("Erro.");
}
});
});