Problem doing CRUD with HTML and JS [closed]

closed . This question needs details or to be clearer and is not currently accepting answers.

want to improve this question? Add details and make it clearer what problem is being solved by editing this post .

Closed 3 years ago .

improve this question

I can't make 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>
Author: Caique Romero, 2018-01-15

1 answers

Your Function had a space in the signature, and the edit function was not consistent, 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>
 1
Author: Julio Henrique, 2018-01-15 17:57:33