計算（長度*數量=總（米），總（米）*價格=總價）但總價不會顯示結果

Question

我想在我的動態表上計算乘法（長度*數量=總（米），總（米）*價格=總價），但總價不會顯示結果。

對不起，我的英語不好

 $('#tab_logic tbody tr').each(function(i, element) { var html = $(this).html(); if(html!==''){ var qty2 = $(this).find('.qty2').val(); var length = $(this).find('.length').val(); var qty = $(this).find('.qty').val(length*qty2); var price = $(this).find('.price').val(); $(this).find('.total').val(qty*price); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <thead> <tr> <th class="text-center"> # </th> <th class="text-center"> Product </th> <th class="text-center"> Width </th> <th class="text-center"> Length </th> <th class="text-center"> Qty </th> <th class="text-center"> Total(m) </th> <th class="text-center"> Price Rate </th> <th class="text-center"> Total Price </th> </tr> </thead> <tbody> <tr id='addr0'> <td>1</td> <td><input type="text" name='product[]' placeholder='Enter Product Name' class="form-control"/></td> <td><input type="text" name='width[]' placeholder='Enter Product Name' class="form-control"/></td> <td><input type="number" name='length[]' placeholder='Enter Product Name' class="form-control length"/></td> <td><input type="number" name='qty2[]' placeholder='Enter Product Name' class="form-control qty2"/></td> <td><input type="number" name='qty[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0"/></td> <td><input type="number" name='price[]' placeholder='Enter Unit Price' class="form-control price" step="0.00" min="0"/></td> <td><input type="number" name='total[]' placeholder='0.00' class="form-control total" readonly/></td> </tr>

Answer 1

從我從您的代碼片段中可以看出，您想要填充總字段。 我根據您的代碼制作了一個最小的可重現示例。 我向input標簽添加了id屬性，並添加了一個計算按鈕，該按鈕進行數學計算以計算字段的總數。 希望這可以讓您走上正確的道路，讓您只需采用我在這里所擁有的並將其應用於您的代碼。

 $(document).on('click','#calc', function(){ var qty2 = $('#qty2').val(); var length = $('#length').val(); var temp = qty2 * length; var qty = $('#qty').val(temp).val(); var price = $('#price').val(); $('#totalNum').val(qty*price); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id ='tab_logic'> <thead> <tr> <th class="text-center"> # </th> <th class="text-center"> Product </th> <th class="text-center"> Width </th> <th class="text-center"> Length </th> <th class="text-center"> Qty </th> <th class="text-center"> Total(m) </th> <th class="text-center"> Price Rate </th> <th class="text-center"> Total Price </th> </tr> </thead> <tbody> <tr id='addr0'> <td>1</td> <td><input type="text" name='product[]' placeholder='Enter Product Name' class="form-control"/></td> <td><input type="text" name='width[]' placeholder='Enter Product Name' class="form-control"/></td> <td><input id="length" type="number" name='length[]' placeholder='Enter Product Name' class="form-control"/></td> <td><input id="qty2" type="number" name='qty2[]' placeholder='Enter Product Name' class="form-control"/></td> <td><input id ="qty" type="number" name='qty[]' placeholder='Enter Qty' class="form-control" step="0" min="0"/></td> <td><input id="price" type="number" name='price[]' placeholder='Enter Unit Price' class="form-control" step="0.00" min="0"/></td> <td><input id="totalNum" type="number" name='total[]' placeholder='0.00' class="form-control total" readonly/></td> </tr> </tbody> </table> <button id="calc">Calculate</button>