I can not do the edit button:
var count = 1;
function Insert(nome,idade){
var tr =
'<tr>'+
'<td style="font-size:20px;text-align: center" class="tdnome">'+nome+'</td>'+
'<td style="font-size:20px;text-align: center" class="tdidade" >'+idade+'</td>'+
'<td style="font-size:20px;text-align: center" class="tdBotoes">'+
'<button class="btn btn-flat btn-success botaoEditar" id="botaoEditar" data-id="'+count+'" style="width: 150px" type="button" name="ok" >Editar</button>'+
'<button class="btn btn-flat btn-success botaoDeletar" style="width: 150px" id="botaoDeletar" type="button">Deletar</button>' +
'</td>'+
'</tr>'
$('#grid').find('tbody').append( tr );
$(".botaoEditar").on("click",Editar);
$(".botaoDeletar").off("click");
$(".botaoDeletar").on("click",Deletar);
};
function Editar () {
// Primeiro verifica se a tag <tbody> existe. Adiciona um caso não exista
if ($("#grid tbody").length == 0){
$("#grid").append("<tbody></tbody>");
}
var tr =
'<tr>'+
'<td style="font-size:20px;text-align: center" class="tdnome">'+nome+'</td>'+
'<td style="font-size:20px;text-align: center" class="tdidade" >'+idade+'</td>'+
'<td style="font-size:20px;text-align: center" class="tdBotoes">'+
'<button class="btn btn-flat btn-success botaoEditar" id="botaoEditar" data-id="'+count+'" style="width: 150px" type="button" name="ok" >Editar</button>'+
'<button class="btn btn-flat btn-success botaoDeletar" style="width: 150px" id="botaoDeletar" type="button">Deletar</button>' +
'</td>'+
'</tr>'
$('#grid').find('tbody').append( tr );
$(".botaoEditar").on("click",Editar);
$(".botaoDeletar").off("click");
$(".botaoDeletar").on("click",Deletar);
};
function Deletar(){
$(this).closest("tr").remove();
}
$(document).ready(function(){
$("#ok").on("click",function(){
var ok = true;
var txt ="";
if($("#qlIdade").val() == ""){
ok = false;
txt += "Preencha um idade. ";
}
if($("#nome").val() == ""){
ok = false;
txt += "Preencha um nome. ";
}
if(!ok){
alert(txt);
}else{
Insert( $("#nome").val() , $("#qlIdade").val() );
$("#qlIdade").val("");
$("#nome").val("");
count ++;
}
});
$("#qlIdade").on("keyup",function() {
this.value = fnc(this.value, 1, 100);
})
});
function fnc(value, min, max)
{
if(parseInt(value) < 0 || isNaN(value))
return null;
else if(parseInt(value) >= 100){
alert("Numero maior que 100");
$("#qlIdade").val("");
}
else return value;
}
.painel-body{
padding: 15px;
}
.btn-danger{
color: #fff;
background-color: #d9534f!important;
border-color: #d43f3a!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-offset-1 col-xs-10">
<div id="crud" class="panel panel-default">
<form action="" method="post" id="form_prepare">
<div class="panel-heading">Crud</div>
<div class="painel-body">
<div class="row">
<div class="col-xs-2">
<div class="form-group">
<label>Nome</label>
<input id="nome" name="nome" class="form-control" type="text" placeholder="Digite o nome"/>
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<label>Idade</label>
<input type="number" name="idade" id="qlIdade" maxlength="3" max="100" min="1" class="form-control" placeholder="digite idade menor que 100">
</div>
</div>
<div class="col-xs-2 pull-right">
<div class="form-group">
<label></label>
<button class="btn btn-flat btn-block btn-success botaoInserir" id="ok" type="button" name="ok">Cadastrar</button>
</div>
</div>
</div>
</div>
</form>
<table id="grid" style="width:100%" border="4">
<thead>
<tr>
<th style="font-size:20px;text-align: center" >Nome</th>
<th style="font-size:20px;text-align: center">idade</th>
<th style="font-size:20px;text-align: center">Ações</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="panel-footer" style="max-height: 300px; overflow-y: scroll;"></div>
</div>
</div>
</div>