Question

如何通过append（）在表中创建仍然可以使用数学运算操作的行？

现在我有HTML行，包括netto价格，金额，折扣，税率和brutto价格 - brutto价格显示在输入netto和金额，税收之后，但它只适用于HTML生成的行，不是为jQuery追加。如何解决？

HTML

<table class="table table-striped table-bordered" id="invoice">
    <thead>
        <tr>
             <th class="col-xs-0">Lp.</th>
             <th class="col-xs-4">Towar/usługa</th>
             <th class="col-xs-1">PKWiU</th>
             <th class="col-xs-1">Ilość</th>
             <th class="col-xs-1">Jedn.</th>
             <th class="col-xs-1">Cena netto</th>
             <th class="col-xs-1">Rabat</th>
             <th class="col-xs-2">VAT</th>
             <th class="col-xs-1">Cena brutto</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <th><p class="form-control-static">1.</p></th>
             <td>
                 <div class="form-group input-sm">
                     <input type="text" name="product[]" class="form-control" required>
                 </div>
             </td>
             <td>
                 <div class="form-group input-sm">
                     <input type="text" name="pkwiu[]" class="form-control">
                 </div>
             </td>
             <td>
                 <div class="form-group input-sm">
                     <input type="text" name="quantity[]" class="form-control quantity" required>
                 </div>
             </td>
             <td>
                 <div class="form-group input-sm">
                     <input type="text" name="unit[]" class="form-control">
                 </div>
             </td>
             <td>
                 <div class="form-group input-sm">
                     <input type="text" name="nettoprice[]" class="form-control nettoprice" required>
                 </div>
             </td>
             <td>
                  <div class="form-group input-sm">
                      <input type="text" name="discount[]" class="form-control discount">
                  </div>
             </td>
             <td>
                 <div class="form-group">
                     <div class="col-xs-12">
                         <select class="form-control vatrate" name="vatrate[]" form="invoice">
                             <option value="0">zw.</option>
                             <option value="1.00">0%</option>
                             <option value="1.05">5%</option>
                             <option value="1.08">8%</option>
                             <option value="1.23" selected>23%</option>
                         </select>
                     </div>
                 </div>
             </td>
             <td>
                 <div class="form-group input-sm">
                    <input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">
                </div>
            </td>
        </tr>
    </tbody>
</table>

的jQuery

var x = 2;
$("#addProduct").click(function(){
        $row = '<tr>' +
            '<th>'+x+'.</th>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="product[]" class="form-control" required>' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="pkwiu[]" class="form-control">' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="quantity[]" class="form-control quantity" required>' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="unit[]" class="form-control">' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="nettoprice[]" class="form-control nettoprice" required>' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="discount[]" class="form-control discount">' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group">' +
                        '<div class="col-xs-12">' +
                            '<select class="form-control vatrate" name="vatrate[]" form="invoice">' +
                                '<option value="0">zw.</option>' +
                                '<option value="1.00">0%</option>' +
                                '<option value="1.05">5%</option>' +
                                '<option value="1.08">8%</option>' +
                                '<option value="1.23" selected>23%</option>' +
                            '</select>' +
                        '</div>' +
                    '</div>' +
                '</td>' +
                '<td>' +
                    '<div class="form-group input-sm">' +
                        '<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">' +
                    '</div>' +
                '</td>' +
            '</tr>';
        $('#invoice > tbody:last').append($row);
    x=x+1;
});

$("#deleteProduct").click(function(){
    $("tbody > tr:last").remove();
    if(x > 1) {
        x = x - 1;
    }
});

$('select').on('change', function () {
                var vat = this.selectedOptions[0].value;
                console.log(vat);
});

$(":input").on('input', function(){    
    var $tr = $(this).closest("tr");
        var netto = parseFloat($tr.find('.nettoprice').val()),
            quantity = parseFloat($tr.find('.quantity').val()),
            vat = parseFloat($tr.find('.vatrate').val()),
            discount = parseFloat($tr.find('.discount').val());

            if(isNaN(discount)) {
                discount = 1;
            } else {
                discount = discount / 100;
                discount = 1 - discount;
            }            

            if(vat == 0 || vat == -1) {
                vat = 1;
            }
        var v = '';
    console.log(netto, quantity, vat, discount);
        if(!isNaN(netto) && !isNaN(vat) && !isNaN(quantity)) {
            v = netto * quantity * discount * vat;
            v = v.toFixed(2);
        }
        $tr.find('.bruttoprice').val(v.toString());
    });

Answer 1

删除last或将其设为:last-child：

$('#invoice > tbody').append($row);
$('#invoice > tbody:last-child').append($row);

Answer 2

从中删除:last：

 $('#invoice > tbody').append($row);

或将.after()与:last tr表一起使用：

 $('#invoice > tbody tr:last').after($row);

Answer 3

好的，我发现了错误 - 现在功能正常。

user settings

从jQuery append（）不工作的HTML表行

3 个答案: