根據每行的變化計算

Question

我有一張發票形式來生成PDF。我想在用戶填寫表單的值更改後計算輸入。我可以計算第一行，但是我想（1）計算每一行，並在最後（2）正確計算所有列。對於（1）的第一步，我將進行總計算。

問題是，我使用動態名稱和ID生成行，因爲我將它們發佈到數據庫中。對於這個例子，id對於每一行輸入都是一樣的。

PS：我不能使.change工作和我使用$(document).on('change', '#qty', function (e) { calculateLine(); });來觸發針對每個輸入計算功能。我不知道爲什麼.change不支持，因爲它支持最新的jQuery。

[invoice.php]

<script> 
    $(document).ready(function() { 

     $(document).on('change', '#qty', function (e) { calculateLine(); }); 
     $(document).on('change', '#price', function (e) { calculateLine(); }); 
     $(document).on('change', '#discount', function (e) { calculateLine(); }); 
     $(document).on('change', '#discountPrice', function (e) { calculateLine(); }); 

    }); 
</script> 

[invoice.js]

function calculateLine() { 

    var qty = parseFloat($('#qty').val()); 
    var price = parseFloat($('#price').val()); 
    var discount = parseFloat($('#discount').val()); 
    var discountPrice = parseFloat($('#discountPrice').val()); 
    var vat = parseFloat($('#vat').val()); 

    var netTotal = 0; 
    var total = 0; 
    var vatAmount = 0; 

    if (!qty && qty == 0) { 
     return; 
    } 
    if (!price && price == 0) { 
     return; 
    } 

    netTotal = qty * price; 

    if ((!discount || discount == 0) && discountPrice != 0) { 
     discount = (discountPrice/netTotal) * 100; 
    } 
    if ((!discountPrice || discountPrice == 0) && discount != 0) { 
     discountPrice = (netTotal/100) * discount; 
    } 
    if (discountPrice != 0 && discount != 0) { 
     discountPrice = (netTotal/100) * discount; 
    } 
    if ((!discount || discount == 0) && (!discountPrice || discountPrice == 0)) { 
     discountPrice = 0; 
     discount = 0; 
    } 

    total = netTotal - discountPrice; 

    if (!total || total == 0) { 
     total = 0; 
    } 
    vatAmount = (total/100) * vat; 

    $('#total').val(total); 
    $('#discount').val(discount); 
    $('#discountPrice').val(discountPrice); 
    $('#vatAmount').val(vatAmount); 

    //calculateTotal(); 
} 

[HTML]

<tr> 
    <td class="col-xs-0"> 
     <input type="checkbox" name="selected[]" class="checkall"> 
    </td> 
    <td class="col-xs-5"> 
     <textarea type="text" name="invoice[item][{{j}}][description]" class="form-control description" rows="1" ></textarea> 
    </td> 
    <td class="col-xs-1"> 
     <input type="text" name="invoice[item][{{j}}][unit]" class="form-control unit" value="" /> 
    </td> 
    <td class="col-xs-1"> 
     <input type="text" name="invoice[item][{{j}}][qty]" class="form-control qty" value="" /> 
    </td> 
    <td class="col-xs-1"> 
     <input type="text" name="invoice[item][{{j}}][price]" class="form-control price" value="" /> 
    </td> 
    <td class="col-xs-1"> 
     <input type="text" name="invoice[item][{{j}}][discount]" class="form-control discount" value="" > 
    </td> 
    <td class="col-xs-1"> 
     <input type="text" name="invoice[item][{{j}}][discountPrice]" class="form-control discountPrice" /> 
    </td> 
    <td class="col-xs-1"> 
     <input type="text" name="invoice[item][{{j}}][total]" class="form-control total" value="" /> 
    </td> 
    <td class="col-xs-1"> 
     <input type="text" name="invoice[item][{{j}}][vat]" class="form-control vat" value="{{invcl_vat}}" readonly /> 
     <input type="hidden" name="invoice[item][{{j}}][vatAmount]" class="form-control vatAmount" value="" readonly /> 
    </td> 
</tr> 

Answer 1

您還沒有表現出你的HTML，但是從您的問題中可以清楚地看到，您在多個元素上使用相同的id（qty等）。你不能那樣做。每頁id必須在網頁上唯一。在這種情況下，你可能會使用類。

，你做你在說什麼的是確實使用委託事件處理的一般方法，然後找到包含行，並使用爲出發點尋找使用類，而不是id小號後裔輸入：

$("selector-for-the-table").on("change", "input", function() { 
    // Get the row containing the input 
    var row = $(this).closest("tr"); 

    // Get the values from _this row's_ inputs, using `row.find` to 
    // look only within this row 
    var qty = parseFloat(row.find('.qty').val()); 
    var price = parseFloat(row.find('.price').val()); 
    var discount = parseFloat(row.find('.discount').val()); 
    var discountPrice = parseFloat(row.find('.discountPrice').val()); 
    var vat = parseFloat(row.find('.vat').val()); 

    // ... 
}); 

我也在桌子上，而不是document，所以它只適用於適當的地方。

Live (Simplified) Example：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Example</title> 
</head> 
<body> 
    <table> 
    <thead> 
     <tr> 
     <th>Quantity</th> 
     <th>Price</th> 
     <th>Total</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td><input type="text" class="qty"></td> 
     <td><input type="text" class="price"></td> 
     <td><input type="text" class="total" disabled></td> 
     </tr> 
     <!-- ...and so on... --> 
    </tbody> 
    </table> 
<script> 
    (function() { 
    "use strict"; 

    $("table").on("change", "input", function() { 
     var row = $(this).closest("tr"); 
     var qty = parseFloat(row.find(".qty").val()); 
     var price = parseFloat(row.find(".price").val()); 
     var total = qty * price; 
     row.find(".total").val(isNaN(total) ? "" : total); 
    }); 
    })(); 
</script> 
</body> 
</html> 

---

你之前說的名字是動態的。當然有一些你試圖找到的領域的特點是一致的，或者你可以使他們一致。在最壞的情況下（我的意思是在最壞的情況下），你可以根據位置  —做第一個input行row.find("input:eq(0)")，第二個是row.find("input:eq(1)")，依此類推。

Live Example Using eq：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Example</title> 
</head> 
<body> 
    <table> 
    <thead> 
     <tr> 
     <th>Quantity</th> 
     <th>Price</th> 
     <th>Total</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td><input type="text"></td> 
     <td><input type="text"></td> 
     <td><input type="text" disabled></td> 
     </tr> 
     <!-- ...and so on... --> 
    </tbody> 
    </table> 
<script> 
    (function() { 
    "use strict"; 

    $("table").on("change", "input", function() { 
     var row = $(this).closest("tr"); 
     var qty = parseFloat(row.find("input:eq(0)").val()); 
     var price = parseFloat(row.find("input:eq(1)").val()); 
     var total = qty * price; 
     row.find("input:eq(2)").val(isNaN(total) ? "" : total); 
    }); 
    })(); 
</script> 
</body> 
</html> 

但要避免，如果你可能可以，但如果更改列的順序是脆弱  —，你必須改變你的代碼。