0

Olá, pessoal. Tudo bom? Comecei a pouco tempo estudar Javascript e, para treinar, bolei um exercício simples: Uma tela, aonde existe o botão "Adicionar Produto" que adiciona uma linha na tabela abaixo. É mais ou menos como num carrinho de compras de e-commerce. A minha dúvida está no seguinte: Quando adiciono uma linha, eu queria que o botão "+" adicionasse uma unidade na quantidade e o "-" tirasse. O problema é que para o primeiro item, até consegui programar, mas para os que serão gerados depois do "Adicionar Produto" não consegui de jeito nenhum. Eu dei uma limpada no código, porque por causa dos vários testes que tinha feito, ficou uma bagunça. Aí, eu realmente queria essa ajuda. Como posso fazer para que os botões de adicionar e remover itens sejam criados já programados para mexer na quantidade de sua respectiva linha?

// Write JavaScript here 
window.onload = function() {
    tableEl = document.getElementById('tabelaDados');
    btnAddLine = document.getElementById('btnAddLine');
    

    btnAddLine.addEventListener('click', function(){
        var tr = document.createElement('tr');
    
        tr.innerHTML = 
            `
                <td><button>-</button> 1  <button>+</button> </td>
                <td>carro</td>
                <td>R$ 55.000,00</td>
                <td>R$ 55.000,00</td>    
            `
    
        tableEl.appendChild(tr);
    });
}
#tabelaHeader {
    height: 50px;
    width: 600px;
}

#tabelaDados {
    position: relative;
    height: 50;
    width: 600px;
    left: 60px;
}
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Usuários - Teste </title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" type="text/css" href="../css/estilo.css">
    </head>

    <body>
        <div class="menu">
            <button id="btnAddLine">Adicionar Produto</button>
        </div>
        <table id="tabelaHeader">
            <thead>
                <tr>
                    <th>Quantidade</th>
                    <th>Descrição</th>
                    <th>Valor Unitário</th>
                    <th>Valor Final</th>
                </tr> 
            </thead>
        </table>

        <table id="tabelaDados">
            <thead>
                <tr>
                    <td><button>-</button>1  <button>+</button> </td>
                    <td>carro</td>
                    <td>R$ 55.000,00</td>
                    <td>R$ 55.000,00</td>  
                </tr>
            </thead>
        </table>
    

Se puderem dar uma olhada para me ajudar, agradeço!

1 Resposta 1

0

O que acontece e que quando voce adiciona a nova linha com os botoes + e -, o seu codigo nao sabe desse novo elemento, por isso funciona somente na primeira linha que ja esta no HTML.

A ideia seria adicionar o listener nos botoes + e - toda vez que adicionar uma nova linha.

Com jquery isso e bem simples, acho que da pra entender a ideia geral.

$(window).ready(function(){
    var $tableEl = $('#tabelaDados');
    var btnAddLine = $('#btnAddLine');

    btnAddLine.on('click',function(){
        var tr = document.createElement('tr');
    
        tr.innerHTML = 
            `
                <td>
                  <button class="sub">-</button>
                  <span class="qtd">1</span>
                  <button class="add">+</button>
                </td>
                <td>carro</td>
                <td>R$ 55.000,00</td>
                <td>R$ 55.000,00</td>    
            `
    
        $tableEl.append(tr);
    });
    
    //aqui e a grande magica, de um jeito simples ele monitora o elemento #tabelaDados
    //e aplica o listener de click sempre que um novo elemento com a classe .add aparece
    
    //Na verdade o termo correto para voce estudar é eventPropagation/eventBubbling
    $('#tabelaDados').on('click', '.add', function(){
      var $tr = $(this).parent().parent()
      var $qtd = $tr.find('.qtd')
      $qtd.text(parseInt($qtd.text())+1)
    })
    
    $('#tabelaDados').on('click', '.sub', function(){
      var $tr = $(this).parent().parent()
      var $qtd = $tr.find('.qtd')
      var qtdInt = parseInt($qtd.text())
      if(qtdInt>0){
        $qtd.text(qtdInt-1)
      }
    })
})
#tabelaHeader {
    height: 50px;
    width: 600px;
}

#tabelaDados {
    position: relative;
    height: 50;
    width: 600px;
    left: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Usuários - Teste </title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" type="text/css" href="../css/estilo.css">
    </head>

    <body>
        <div class="menu">
            <button id="btnAddLine">Adicionar Produto</button>
        </div>
        <table id="tabelaHeader">
            <thead>
                <tr>
                    <th>Quantidade</th>
                    <th>Descrição</th>
                    <th>Valor Unitário</th>
                    <th>Valor Final</th>
                </tr> 
            </thead>
        </table>

        <table id="tabelaDados">
            <thead>
            </thead>
        </table>

4
  • muito obrigado por sua ajuda! Ficou extremamente simples, como você mesmo disse. Pode só me explicar uma coisa, só para eu entender? No jQuery, nas linhas: var $tr = $(this).parent().parent() var $qtd = $tr.find('.qtd') $qtd.text(parseInt($qtd.text())+1) O que ele faz é: - Pegar o 'tr' que pai (que está no innerHTML) - procurar pelo span qtd - aplicar a adição da quantidade A ideia é essa então, certo? o "this" que está na variável $tr se refere à #tabelaDados? Muito obrigado mais uma vez, Neuber! :)
    – Gus
    Commented 6/03/2019 às 0:33
  • O this do tr esta apontando para o elemento clicado, .sub e .add. Quanto ao parent().parent() e isso mesmo, vou ate o tr e a partit dai busco o qtd, de fato so precisatia de um parent(). Nao vou dizer que e o jeito certo, é somente como eu faço, por que dependendo de como alterar a estrutura do HTML vai precisar mudar o js, talvez ate os parent etc..... Commented 6/03/2019 às 0:52
  • Perfeito, Neuber! Muito obrigado pela ajuda, explicação e paciência, de verdade! :)
    – Gus
    Commented 6/03/2019 às 1:00
  • se a resposta te ajudou escolha ela como a melhor, assim voce tambem contribui com o site ^^ Commented 6/03/2019 às 1:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .