Ajuda com o código Javascript

Front-end
#1

Gostaria de uma ajuda nesses dois códigos, já prestei atenção mas não sei o que falta, não está funcionando esse código não chego a fazer nada do crud nesse código
Segue o 1° Código:

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="funcoes.js"></script>
</head>
<body>
    <button id="btnAdicionar">Novo</button>
    <table id="tblCadastro">         
        <thead>
            <tr>
                <th>Nome do Produto</th>
                <th>Descrição</th>
                <th>Quantidade</th>
                <th>Valor</th>
                <th>Desconto</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

2° código:

$(function(){

    function Adicionar(){

        $("#tblCadastro tbody").append(

            "<tr>"+

            "<td><input type='text'/></td>"+

            "<td><input type='text'/></td>"+

            "<td><input type='text'/></td>"+

            "<td><input type='text'/></td>"+

            "<td><input type='text'/></td>"+

            "<td><img src='img/salvar.png' class='btnSalvar'><img src='img/remove.png' class='btnExcluir'/></td>"+

            "</tr>");

        $(".btnSalvar").bind("click", Salvar);     

        $(".btnExcluir").bind("click", Excluir);

    };

    function Salvar(){

        var par = $(this).parent().parent(); //tr

        var tdNomeItem = par.children("td:nth-child(1)");

        var tdDescricao = par.children("td:nth-child(2)");

        var tdQuantidade = par.children("td:nth-child(3)");

        var tdValor = par.children("td:nth-child(4)");

        var tdDescricao = par.children("td:nth-child(5)");

        var tdBotoes = par.children("td:nth-child(6)");

        tdNomeItem.html(tdNomeItem.children("input[type=text]").val());

        tdDescricao.html(tdDescricao.children("input[type=text]").val());

        tdQuantidade.html(tdQuantidade.children("input[type=text]").val());

        tdValor.html(tdValor.children("input[type=text]").val());

        tdDesconto.html(tdDesconto.children("input[type=text]").val());

        tdBotoes.html("<img src='img/remove.png'class='btnExcluir'/><img src='img/edit.png' class='btnEditar'/>");

        $(".btnEditar").bind("click", Editar);

        $(".btnExcluir").bind("click", Excluir);

    };

    function Editar(){

        var par = $(this).parent().parent(); //tr

        var tdNomeItem = par.children("td:nth-child(1)");

        var tdDescricao = par.children("td:nth-child(2)");

        var tdQuantidade = par.children("td:nth-child(3)");

        var tdValor = par.children("td:nth-child(4)");

        var tdDesconto = par.children("td:nth-child(5)");

        var tdBotoes = par.children("td:nth-child(6)");

        tdNomeItem.html("<input type='text' id='item' value='"+tdNomeItem.html()+"'/>");

        tdDescricao.html("<input type='text'id='descricao' value='"+tdDescricao.html()+"'/>");

        tdQuantidade.html("<input type='text'id='quantidade' value='"+tdQuantidade.html()+"'/>");

        tdValor.html("<input type='text' id='valor' value='"+tdValor.html()+"'/>");

        tdDesconto.html("<input type='text' id='desc' value='"+tdDesconto.html()+"'/>");

        tdBotoes.html("<img src='img/salvar.png' class='btnSalvar'/>");

        $(".btnSalvar").bind("click", Salvar);

        $(".btnEditar").bind("click", Editar);

        $(".btnExcluir").bind("click", Excluir);

    };

    function Excluir(){

        var par = $(this).parent().parent(); //tr

        par.remove();

    };

    $(".btnEditar").bind("click", Editar);

    $(".btnExcluir").bind("click", Excluir);

    $("#btnAdicionar").bind("click", Adicionar); 

});

icones usados:edit
remove salvar

#2

Na linha 41 do funcoes.js, altere de:

var tdDescricao = par.children("td:nth-child(5)");

para:

var tdDesconto = par.children("td:nth-child(5)");

Acabou ficando duas variáveis com o nome tdDescricao.

#3

Ok, já alterei conforme vc falou! Mas o código ainda não funciona embora tenha ajeitado isso.

#4

Estranho, fiz apenas essa mudança (dentro da função salvar apenas), e funcionou de boa o salvar, editar e remover. Veja o erro que está dando no console e mande ele aqui.

Veja: https://www.guj.com.br/uploads/default/original/3X/8/5/8567d2bbf1e167dedb738ab1c480b5e8653693c2.webm

#5

image
No meu aqui eu fiz um teste clico em novo e não pega, fica congelado não vai para os campos

#6

Tenta limpar o cache do seu navegador (ou abrir numa aba anonima).

#7

Já fiz isso na aba anonima e normal, limpei a cache e não pega, bem estranho

#8

E erro no console, aparece algum?

#9

Não aparece nada de erro no vs code

#10

E no console do navegador?

#11

Disse a seguinte mensagem:
image

#12

No final da linha (lado direito) deve ter mais informação. Acho que o nome do recurso que não foi encontrado.

#13

Só vi isso até agora:

image
image.png873×417 9.2 KB

#14

O que tem na linha 1 do arquivo funcoes.js?

#15

image
image.png740×237 12 KB

funcoes.js (2,7,KB)

#16

O problema não deve ser mais no código. Eu usei esse arquivo que vc mandou e funcionou. Como vc está abrindo a página para testar? Usando algum servidor ou apenas abrindo o html normalmente?

#17

Abrindo o Html nos dois browsers Chrome e Edge.
cadprodutos.html (635,Bytes)

#18

Pois eh, use esse html e funcionou aqui tb.

#19

Só aqui no meu notebook que não pega, muito estranho. Mesmo assim obg pela ajuda!