javascript - jQuery 发票和 HTML

Question

我目前正在为自己开发一个动态发票系统。但我似乎无法完全让它正常工作。

我有一个像这样的 HTML 发票表:

品名--数量--含税--价格(不含税)--总价

我的 HTML 看起来像这样:

<td><input type="text" placeholder="Item name" class="form-control" /></td>
<td class="text-center"><input type="number" min="1" id="target" placeholder="Quantity" class="form-control quantity" /></td>
<td class="text-center"><input type="text" placeholder="TAX" class="form-control tax" /></td>
<td class="text-right"><input type="text" placeholder="Price" class="form-control" /></td>
<td class="text-right"><input type="text" disabled placeholder="0,00" class="form-control price" /></td>

我可以使用这段 Javascript 代码添加行:

<script>
function addItem(){

    var itemRow =
            '<tr>' +
                '<td><input type="text" class="form-control" placeholder="Item name" /></td>' +
                '<td><input type="text" class="form-control" placeholder="Quantity" /></td>' +
                '<td><input type="text" class="form-control tax" placeholder="Tax" /></td>' +
                '<td><input type="text" class="form-control" placeholder="Price" /></td>' +
                '<td><input type="text" class="form-control price" disabled placeholder="0,00" /></td>' +
            '</tr>';

    $("#items_table tr:last").after(itemRow);
}
</script>

我用这个 jQuery 代码计算它:

 <script>
    var total = 0;
    var taxTotal = 0;

    (function() {
        $('#items_table').on('change', 'input', function() {
            if( !$(this).hasClass('tax')) {
                totalPrice = 0;

                var row = $(this).closest('tr');

                // ## Get quantity
                var qty = parseFloat(row.find('input:eq(1)').val());

                if (qty < 0) {
                    row.addClass('danger');
                    return;
                } else {
                    row.removeClass('danger');
                }

                // ## Get the entered price
                var price = parseFloat(row.find('input:eq(3)').val());

                if (price < 0) {
                    row.addClass('danger');
                    return;
                } else {
                    row.removeClass('danger');
                }

                // ## Calculate total price
                var total = qty * price;

                // ## Set total price at the end
                row.find('input:eq(4)').val(isNaN(total) ? '' : total);

                tax = parseFloat(row.find('input:eq(2)').val());

                var salesTax = total * (tax / 100);

                if (!isNaN(salesTax)) {

                    $('#tax-' + row.find('input:eq(2)').val()).html(salesTax.toFixed(2));

                    $('#tax_percentage').html(tax + '%');
                    $('#tax_total').html('&euro; ' + salesTax.toFixed(2));

                    $('.price').each(function (i, obj) {
                        // ## Add all the prices again
                        totalPrice = totalPrice += parseFloat($(this).val()) + salesTax;
                    });
                }

                $('#total_price').html('&euro; ' + totalPrice.toFixed(2));
            }else{

                // ## Remove all the taxes
                $('[id^=tax-tr-]').remove();


                if($('#tax-'+ $(this).val()).length > 0 ){
                    console.log('it already exists');
                }else{

                    $('.tax').each(function (i, obj) {
                        var itemRow =
                                '<tr id="tax-tr-' + $(this).val() + '">' +
                                    '<td colspan="4" class="font-w600 text-right">BTW ' + $(this).val() + '%</td>' +
                                    '<td style="width: 20%;" class="text-right">&euro; <span id="tax-' + $(this).val() + '">0</span></td>' +
                                '</tr>';

                        $("#subtotal_table tr").eq(-2).after(itemRow);
                    });

                }

            }
        });
    })();
</script>

尽管如此，它并没有完全按照我的意愿行事。我希望总价位于表格行的末尾(total price disabled row)

我希望将税添加到发票下方(一个新表格)，如下所示:

小计:(不含税的总价) TAX 10%:(按10%的税额) TAX 15%:(按15%的税额) 合计:(小计价+含税价)

但我遇到的问题是，一旦我在表中有 2 个项目，并且我更改了第一行的 TAX，它就会变得一团糟。

我目前不知道如何正确执行此操作。所以我只需要填充 1 个项目行，税费就会添加到总表中，一旦我更改了该行中的税费，它也会在下方更改，并且价格也必须更改。

有人可以让我回到正确的轨道上吗？

Answer 1

您还不清楚您要在第二个表格中显示什么，但是，我相信下面的内容会满足您的需要。

Here is a jsFiddle as well

$('#addRow').click(function () {
    addItem();
});
$('#items_table').on('keyup', '.update', function () {
    var key = event.keyCode || event.charCode; // if the user hit del or backspace, dont do anything
    if( key == 8 || key == 46 ) return false;
    calculateTotals();
});
$('#taxPercentage').change(function () {
    calculateTotals(); // user changed tax percentage, recalculate everything
});

function calculateTotals(){
    
    // get all of the various input typs from the rows 
    // each will be any array of elements
    var nameElements = $('.row-name');
    var quantityElements = $('.row-quantity');
    var taxElements = $('.row-tax');
    var priceElements = $('.row-price');
    var totalElements = $('.row-total');
    
    // get the bottom table elements
    var taxPercentageElement =$('#taxPercentage');
    var subTotalElement =$('#subTotal');
    var totalTaxElement =$('#totalTax');
    var grandTotalElement =$('#grandTotal');

    var subTotal=0;
    var taxTotal=0;
    var grandTotal=0;
    $(quantityElements).each(function(i,e){
        
        // get all the elements for the current row
        var nameElement = $('.row-name:eq(' + i + ')');
        var quantityElement = $('.row-quantity:eq(' + i + ')');
        var taxElement = $('.row-tax:eq(' + i + ')');
        var priceElement = $('.row-price:eq(' + i + ')');
        var totalElement = $('.row-total:eq(' + i + ')');

        // get the needed values from this row
        var qty = quantityElement.val().trim().replace(/[^0-9$.,]/g, ''); // filter out non digits like letters
            qty = qty == '' ? 0 : qty; // if blank default to 0
            quantityElement.val(qty); // set the value back, in case we had to remove soemthing
        var price = priceElement.val().trim().replace(/[^0-9$.,]/g, '');
            price = price == '' ? 0 : price; // if blank default to 0
            priceElement.val(price); // set the value back, in case we had to remove soemthing
    
        // get/set row tax and total
        // also add to our totals for later
        var rowPrice = (price * 1000) * qty
            subTotal = subTotal + rowPrice;
        var tax = taxPercentageElement.val() * rowPrice;
            taxElement.val((tax / 1000).toFixed(2));
            taxTotal = taxTotal + tax;
        var total =   rowPrice + tax
            totalElement.val((total / 1000).toFixed(2));
            grandTotal = grandTotal + total;
    });
    
    // set the bottom table values
    subTotalElement.val((subTotal / 1000).toFixed(2));   
    totalTaxElement.val((taxTotal / 1000).toFixed(2));  
    grandTotalElement.val((grandTotal / 1000).toFixed(2));   
}
function addItem() {
    var itemRow =
        '<tr>' +
        '<td><input type="text" class="form-control row-name" placeholder="Item name" /></td>' +
        '<td><input type="text" class="form-control update row-quantity" placeholder="Quantity" /></td>' +
        '<td><input type="text" class="form-control update row-tax" placeholder="Tax" /></td>' +
        '<td><input type="text" class="form-control update row-price" placeholder="Price" /></td>' +
        '<td><input type="text" class="form-control row-total" disabled placeholder="0,00" /></td>' +
        '</tr>';
    $("#items_table").append(itemRow);
}
addItem(); //call function on load to add the first item

button{
    font-size:18px;
    
}
.myTable {
    background-color:#ffaa56;
}
.myTable {
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
.myTable tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}
.myTable tr:first-child td:first-child {
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}
.myTable tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
}
.myTable tr:last-child td:first-child {
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
}
.myTable tr:hover td {
}
#items_table tr:nth-child(odd) {
    background-color:#ffffff;
}
#items_table tr:nth-child(even) {
    background-color:#ffd0a3;
}
.myTable td {
    vertical-align:middle;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-size:10px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
}
.myTable tr:last-child td {
    border-width:0px 1px 0px 0px;
}
.myTable tr td:last-child {
    border-width:0px 0px 1px 0px;
}
.myTable tr:last-child td:last-child {
    border-width:0px 0px 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button id="addRow">Add a row</button><br><br>
<table class="myTable">
    <thead>
        <tr>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Tax</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody id="items_table"></tbody>
    <tfoot>
        <tr>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Tax</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
    </tfoot>
</table>
<br>
    <br>
<table class="myTable" style="width:70%">
    <thead>
        <tr>
            <th>Tax Percentage</th>
            <th>Sub Total</th>
            <th>Total Tax</th>
            <th>Grand Total</th>
        </tr>
    </thead>
    <tbody id="items_table">
        
        
        <tr>
            <td>
                <select name="" id="taxPercentage" class="form-control">
                    <option value=".10">10%</option>
                    <option value=".15">15%</option>
                </select>
            <td><input type="text" class="form-control" id="subTotal" disabled placeholder="0,00" /></td>
            <td><input type="text" class="form-control" id="totalTax" disabled placeholder="0,00" /></td>
            <td><input type="text" class="form-control" id="grandTotal" disabled placeholder="0,00" /></td>
        </tr>
        
    </tbody>
    <tfoot>
    </tfoot>
</table>
        
        <p>Add rows and give them values for quantity and price, the script will do the rest.</p> 
        <p>Select a diferent tax amount to recalculate everything</p>