0
I have a table created using html and javascript, the contents of it I used ajax’s GET method to pull a url, in JSON. I’m trying now using POST in ajax to add content to this table, where I write in two text boxes the number of a code and the name of a product and when I click on the record button it create one more row in the table with the values I put. Someone can give me a light?
Follows the HTML:
<div class="card-body" style="background-color:#262626">
<table class="table table-hover table-bordered" id="dataTable" >
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<a><button class="btn" id="popuplink" style= "background-color:#C25C40; border-color:#C25C40; position:absolute; left:850px; top:55px; color:white;">Novo grupo</button></a>
</div>
<div id="popup">
<div id="content">
<input id="popupcodigo" type="text" placeholder="codigo"></input>
<input id="popupgrupo" type="text" placeholder="grupo"></input>
<input id="popupinativo" type="text" placeholder="inativo"></input>
<input id="popupclose" type="Button" value="Gravar"/>
</div>
</div>
Follow javascript with ajax:
$(function(){
$.ajax({
url: "http://url-usada/",
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>Inativo</th>';
event_data += '<th width="10%">Ação</th>';
event_data += '</tr>';
event_data += '</thead>';
//final da tabela
event_data += '<tfoot>';
event_data += ' <tr style="color:white">';
event_data += ' <th width="10%">Código</th>';
event_data += ' <th>Grupo</th>';
event_data += ' <th>Inativo</th>';
event_data += ' <th width="17%">Ação</th>';
event_data += ' </tr>';
event_data += '</tfoot>';
//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>'+value.Inativo+'</td>';
event_data += '<td><a href="alterar-grupoc.html"><button type="button" class="btn btn-info mesmo-tamanho" title="Alterar Grupo"><i class="fa fa-edit"></i></button></a> <a href="404.html" ><button type="button" class="btn btn-danger mesmo-tamanho" title="Excluir Grupo"><i class="fa fa-times"></i></button></a></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.");
}
});
});
I am not using mysql and did not understand exactly what to do
– Gabriel Midão