Skip to main content
adicionou 2253 caracteres ao conteúdo
Fonte Link
Neuber Oliveira
  • 2,5mil
  • 9
  • 17
// 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! https://liveweave.com/X4Ut2B#&togetherjs=9kOOiC537z

Se puderem dar uma olhada para me ajudar, agradeço! https://liveweave.com/X4Ut2B#&togetherjs=9kOOiC537z

// 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!

Fonte Link
Gus
  • 63
  • 2
  • 8

javascript - Criar múltiplas linhas com botões para adicionar já pré programados

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?

Se puderem dar uma olhada para me ajudar, agradeço! https://liveweave.com/X4Ut2B#&togetherjs=9kOOiC537z