Question

我一直在努力使用jQuery（我是新手）我想创建一个发票页面。

页面将包含以下一行文本字段：

数量，说明，净。价格，增值税价格，总价。

当用户开始填写数量，说明以及开始输入 Net时。价格 jQuery需要在下面添加另一行空文本字段。

- 如果用户跳过并填写增值税价格而未填写网络。价格首先jQuery需要在现有的下面添加另一行。

- 如果用户跳过净价和增值税价并开始填写总价，jQuery需要在现有价格下方添加另一行。

然后是计算：

当用户填写网络时。价格 jQuery应自动填写增值税价格以及总价（即数量+增值税价格）

当用户填写增值税价格（跳过净价格）时，jQuery应自动填写 Net。价格以及总价（是数量+增值税价格）

当用户填写总价（跳过网络和增值税价格）时，jQuery应使用数量扣除并填写< STRONG>网络。价格和增值税价格。

你认为你可以帮助我吗？

我有这个HTML代码：

<div id='Invoice' class="row">
    <div class='InvoiceLine row'>
        <div class="ItemFields col-md-1"><input type="text" class="form-control" name="Quantity" id="Quantity"></div>
        <div class="ItemFields col-md-2"><input type="text" class="form-control" name="Description"></div>
        <div class="ItemFields col-md-1"><input type="text" class="form-control" name="NetPrice" id="NetPrice"></div>
        <div class="ItemFields col-md-1"><input type="text" class="form-control" name="VATPrice" id="VATPrice"></div>
        <div class="ItemFields col-md-1"><input type="text" class="form-control" name="TotalPrice" id="TotalPrice"></div>
    </div>
</div>

我正在研究这个jQuery代码，以自动添加一行空文本字段

我设法让它发挥作用。只是错过了一小部分。

我知道我正在查杀代码，但我会更好，功能和员工。

$('#Invoice').on("keyup", ".ItemFields", function() {

var LineNumber = parseInt( $(this).closest('#Invoice').children().last().attr('id') ) + 1

var InvoiceLine = '<div class="ItemFields col-md-1"><input type="text" class="form-control" name="Quantity_'+LineNumber+'" id="Quantity"></div><div class="ItemFields col-md-2"><input type="text" class="form-control" name="Description_'+LineNumber+'"></div><div class="ItemFields col-md-1"><input type="text" class="form-control" name="NetPrice_'+LineNumber+'" id="NetPrice"></div><div class="ItemFields col-md-1"><input type="text" class="form-control" name="VATPrice_'+LineNumber+'" id="VATPrice"></div><div class="ItemFields col-md-1"><input type="text" class="form-control" name="TotalPrice_'+LineNumber+'" id="TotalPrice"></div>';

if ( ($(this).closest('.InvoiceLine').find('#NetPrice').val() != "" || $(this).closest('.InvoiceLine').find('#VATPrice').val() != "" ) && $(this).closest('.InvoiceLine').attr('id') == $(this).closest('#Invoice').children().last().attr('id') ) {
    $('#Invoice .InvoiceLine').last().after('<div id="'+LineNumber+'" class="InvoiceLine row">'+InvoiceLine+'</div>')
    };
$(this).closest('.InvoiceLine').find('#VATPrice').val( ( 0.21 * parseInt($(this).closest('.InvoiceLine').find('#NetPrice').val()) ) +  parseInt($(this).closest('.InvoiceLine').find('#NetPrice').val()) );
$(this).closest('.InvoiceLine').find('#TotalPrice').val( parseInt($(this).closest('.InvoiceLine').find('#Quantity').val()) * parseInt($(this).closest('.InvoiceLine').find('#VATPrice').val()));

}）;

Answer 1

确定它可以正常工作。谢谢大家。

这是代码。我知道它仍然需要工作来制作职能和员工。 :)我稍后会这样做。

$(document).ready(function () { 

$('#Invoice').on("change", ".ItemFields", function() {

    var LineNumber = parseInt( $(this).closest('#Invoice').children().last().attr('id') ) + 1;

    var InvoiceLine = '<div class="ItemFields col-md-1"><input type="text" class="form-control" name="Quantity_'+LineNumber+'" id="Quantity"></div><div class="ItemFields col-md-5"><input type="text" class="form-control" name="Description_'+LineNumber+'"></div><div class="ItemFields col-md-2"><input type="text" class="form-control" name="NetPrice_'+LineNumber+'" id="NetPrice"></div><div class="ItemFields col-md-2"><input type="text" class="form-control" name="VATPrice_'+LineNumber+'" id="VATPrice"></div><div class="ItemFields col-md-2"><input type="text" class="form-control" name="TotalPrice_'+LineNumber+'" id="TotalPrice"></div>';

    if (event.target.id == "Quantity" || event.target.id == "NetPrice" || event.target.id == "VATPrice" || event.target.id == "TotalPrice"){

        if ($(this).closest('.InvoiceLine').find('#Quantity').val() != "" && ($(this).closest('.InvoiceLine').find('#NetPrice').val() != "" || $(this).closest('.InvoiceLine').find('#VATPrice').val() != "" || $(this).closest('.InvoiceLine').find('#TotalPrice').val() != "" ) ) {

            switch (event.target.id) {
                case "NetPrice":
                    $(this).closest('.InvoiceLine').find('#VATPrice').val( parseFloat( ( 0.21 * parseFloat($(this).closest('.InvoiceLine').find('#NetPrice').val()) ) +  parseFloat($(this).closest('.InvoiceLine').find('#NetPrice').val()) ).toFixed(2) );
                    $(this).closest('.InvoiceLine').find('#TotalPrice').val( parseFloat( parseFloat($(this).closest('.InvoiceLine').find('#Quantity').val()) * parseFloat($(this).closest('.InvoiceLine').find('#VATPrice').val()) ).toFixed(2) );
                    break;
                case "VATPrice":
                    $(this).closest('.InvoiceLine').find('#NetPrice').val( parseFloat( parseFloat($(this).closest('.InvoiceLine').find('#VATPrice').val()) - ( (0.21 / 1.21) * parseFloat($(this).closest('.InvoiceLine').find('#VATPrice').val()) ) ).toFixed(2) );
                    $(this).closest('.InvoiceLine').find('#TotalPrice').val( parseFloat( parseFloat($(this).closest('.InvoiceLine').find('#Quantity').val()) * parseFloat($(this).closest('.InvoiceLine').find('#VATPrice').val()) ).toFixed(2) );
                    break;
                case "TotalPrice":
                    $(this).closest('.InvoiceLine').find('#VATPrice').val( parseFloat( parseFloat($(this).closest('.InvoiceLine').find('#TotalPrice').val()) / parseFloat($(this).closest('.InvoiceLine').find('#Quantity').val()) ).toFixed(2) );
                    $(this).closest('.InvoiceLine').find('#NetPrice').val( parseFloat( parseFloat($(this).closest('.InvoiceLine').find('#VATPrice').val()) - ( (0.21 / 1.21) * parseFloat($(this).closest('.InvoiceLine').find('#VATPrice').val()) ) ).toFixed(2) );
                    break;
                case "Quantity":
                    $(this).closest('.InvoiceLine').find('#VATPrice').val( parseFloat( ( 0.21 * parseFloat($(this).closest('.InvoiceLine').find('#NetPrice').val()) ) +  parseFloat($(this).closest('.InvoiceLine').find('#NetPrice').val()) ).toFixed(2) );
                    $(this).closest('.InvoiceLine').find('#TotalPrice').val( parseFloat( parseFloat($(this).closest('.InvoiceLine').find('#Quantity').val()) * parseFloat($(this).closest('.InvoiceLine').find('#VATPrice').val()) ).toFixed(2) );
                    break;
                };

            };

        };


    if ( ($(this).closest('.InvoiceLine').find('#NetPrice').val() != "" || $(this).closest('.InvoiceLine').find('#VATPrice').val() != "" ) && $(this).closest('.InvoiceLine').attr('id') == $(this).closest('#Invoice').children().last().attr('id') ) {
        $('#Invoice .InvoiceLine').last().after('<div id="'+LineNumber+'" class="InvoiceLine row">'+InvoiceLine+'</div>')
        };
});

}）;

Answer 2

老实说，我认为您发布的解决方案可以改进。首先，如果多次添加ID，则该字符串中包含重复的ID - 这会违反文档中的唯一ID。

您的代码似乎过于复杂，并且混合追加计算。我建议添加按钮来添加新行，并且（如果需要的话）在第一行之后删除特定行上的按钮。

这是我的意思的一个例子：

标记：

<div id='Invoice' class="row" data-lastrowadded="0">
    <div class='InvoiceLine row'>
        <div class="ItemFields col-md-1">
            <input type="text" class="form-control" name="Quantity" id="Quantity" />
        </div>
        <div class="ItemFields col-md-2">
            <input type="text" class="form-control" name="Description" id="Description" />
        </div>
        <div class="ItemFields col-md-1">
            <input type="text" class="form-control" name="NetPrice" id="NetPrice" />
        </div>
        <div class="ItemFields col-md-1">
            <input type="text" class="form-control" name="VATPrice" id="VATPrice" />
        </div>
        <div class="ItemFields col-md-1">
            <input type="text" class="form-control" name="TotalPrice" id="TotalPrice" /> <span>
        <button class="adder" type="button">+</button>
        <button class="deleter" type="button">X</button></span>

        </div>
    </div>
</div>
<div class="actionbuttons">
    <button class="adder" type="button">Add New Row</button>
</div>

代码：

$('.adder').on('click', function () {
    var LineNumber = $('#Invoice').data('lastrowadded') + 1;
    var firstInvoiceLine = $('#Invoice').find('.InvoiceLine.row').first();
    var newInvoiceLine = firstInvoiceLine.clone(true);
    newInvoiceLine.find('.InvoiceLine.row').data('linenumber', LineNumber);
    // fix up the id and name
    newInvoiceLine.find('input[type=text]').each(function () {
        var previd = $(this).attr('id');
        var prevname = $(this).attr('name');
        $(this).attr('id', previd + LineNumber)
            .attr('name', prevname + LineNumber); // keep this sequence
    });
    newInvoiceLine.find('.deleter').show().text("X " + LineNumber);
    $('#Invoice').append(newInvoiceLine);
    $('#Invoice').data('lastrowadded', LineNumber); //update the base number
});
$('.deleter').on('click', function () {
    $(this).parents('.InvoiceLine.row').remove();
});
$('.deleter').first().hide();
$('#Invoice').on("keyup", ".ItemFields", function () {
    // var LineNumber = parseInt($(this).closest('.InvoiceLine.row').data('linenumber');
    var activeLine = $(this).closest('.InvoiceLine');

    activeLine.find('input[id^="VATPrice"]').val((0.21 * parseInt(activeLine.find('input[id^="NetPrice"]').val(), 10)) + parseInt(activeLine.find('input[id^="NetPrice"]').val(), 10));
    activeLine.find('input[id^="TotalPrice"]').val(parseInt(activeLine.find('input[id^="Quantity"]').val(), 10) * parseInt(activeLine.find('input[id^="VATPrice"]').val(), 10));

});

对于这里的最终解决方案，我还会考虑使用类而不是ID，这将进一步简化此代码。请注意，在附加ID之前处理对id的修改有些复杂。它还会跟踪父级数据中当前行号的最大值。

在此处查看此行动：http://jsfiddle.net/MarkSchultheiss/1w4bbonu/2/

使用jQuery创建发票行计算增值税和总计

2 个答案: