Paulo Henrique Exemplo

by gugumetal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<table class="tabela-produtos">
    <thead>
        <tr>
            <th>Preço Unitário</th>
            <th>Quantidade</th>
            <th>Subtotal</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" class="preco-unitario">
            </td>
            <td>
                <input type="number" pattern="^\d+(\,|\.)\d$" class="quantidade" value="1">
            </td>
            <td>
                <input type="text" class="subtotal" disabled>
            </td>
            <td>
                <button class="apagar" tabindex="-1">APAGAR</button>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td style="font-weight: bold; vertical-align: middle; font-size: 18pt; text-align: right;">Total</td>
            <td style="border-top: 2px solid #555; padding-top: 3px;"><input type="text" id="total" disabled></td>
            <td></td>
        </tr>
    </tfoot>
</table>

<button id="adicionar-linha">ADICIONAR NOVA LINHA</button>

<p>
    Use o <span class="key">ENTER</span> para trocar de campo e adicionar novas linhas e o <span class="key">ESC</span> para apagar uma linha.
</p>

CSS

* {
    box-sizing: border-box;
}

html,
body {
    font-family: sans-serif;
    color: #555;
}

input,
button {
    height: 40px;
    transition: all .3s;
}

input {
    border: 2px solid #ccc;
    padding: 6px 8px;
    border-radius: 3px;
    outline: none;
    text-align: right;
}

input:focus {
    border-color: #4291e5;
}

button {
    border: none;
    padding: 6px 12px;
    border-radius: 3px;
    background-color: #4291e5;
    color: #fff;
}

button:hover {
    background-color: #3da8e5;
}

button:active {
    background-color: #3692c4;
}

button.apagar {
    background-color: #d30000;
}

button.apagar:hover {
    background-color: #ff1e1e;
}

button.apagar:active {
    background-color: #a00000;
}

#total {
    font-weight: bolder;
}

#adicionar-linha {
    margin-left: 3px;
}

.key {
    border: 1px solid #ccc;
    background: #eee;
    border-radius: 2px;
    padding: 2px;
    font-weight: bold;
}

JavaScript

$(document).ready(function() {
	// Inicializar o plugin de máscara de moeda;
    $("#total, .preco-unitario, .subtotal").maskMoney({
    	prefix: "R$ ",
    	thousands: ".",
        decimal: ",",
        allowNegative: false
    });

    $("#adicionar-linha").click(function() {
        var clone = $(".tabela-produtos tbody tr:first-child").clone(false);

        clone.find(".preco-unitario, .subtotal").maskMoney({
            prefix: "R$ ",
            thousands: ".",
            decimal: ",",
            allowNegative: false
    	});
        
        clone.find(".preco-unitario").maskMoney("mask", 0);
        clone.find(".subtotal").maskMoney("mask", 0);
        clone.find(".quantidade").val("1");
        clone.appendTo(".tabela-produtos tbody");
        clone.find(":input:first").focus();
    });

    $(".tabela-produtos").on("click", ".apagar", function() {
        if ($(".tabela-produtos tbody tr").length === 1) {
            $(this).parent().parent().find(".preco-unitario").maskMoney("mask", 0);
            $(this).parent().parent().find(".subtotal").maskMoney("mask", 0);
            $(this).parent().parent().find(".quantidade").val("1");
        } else {
            $(this).parent().parent().remove();
        }

        calcularTotalGeral();
    });
    
    $(".tabela-produtos").on("keyup", ".preco-unitario", function(e) {
    	if (e.keyCode === 13) $(this).parent().parent().find(".quantidade").focus().select();
    });
    
    $(".tabela-produtos").on("keyup", ".quantidade", function(e) {
    	if (e.keyCode === 13) $("#adicionar-linha").click();
    });

    $(".tabela-produtos").on("keyup", ".preco-unitario, .quantidade", function(e) {
        var linha = $(this).parent().parent();
        var precoUnitario = $(linha).find(".preco-unitario").maskMoney("unmasked")[0];
        var quantidade = $(linha).find(".quantidade").val();

        $(linha).find(".subtotal").maskMoney("mask", (precoUnitario * quantidade));

		if (e.keyCode === 27) {
       ...