Problem doing CRUD with HTML and JS

Question

I’m not getting 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>
<script src="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>

Answer 1

Its function had a signature space, and the edit function was not coherent, see if this meets your request:

var count = 1;

    function Insert(name, year){
    
    nome = name;
    idade = year;
    
        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(){
            
    nome = $('#nome').val();
    idade = $('#qlIdade').val();
    
    //alert(nome + idade);
    
    if(idade == null){
      alert('idade nao pode ser vazia');
      return false;
    }
    
     if(nome == null){
      alert('nome nao pode ser vazia');
      return false;
    }
    
    $(this).closest("tr").remove();
    
        // 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(){
        //nome = '';
        //idade = 0;
        
        $("#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>
<script src="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>