用JavaScript計算總計

Question

我不知道如何獲得盛大的總價值

總計是總計的總和

這是代碼

<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
if(isset($_POST['product_id']))
{
$prno=$_POST['prno'];
$i=1;
$sql = mysqli_query($con,"select * from detail_pr where prNo='$prno'");
while ($r = mysqli_fetch_array($sql)) {

    echo 

    '<tr>
 <td><input type="checkbox" name="check[]" id="check'.$i.'"    value="'.$i.'"></td>
 <td><label for="productCode"></label>
  <input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'" size="12" ></td>
<td><label for="productName"></label>
  <input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"size="35" ></td>
<td><label for="qty"></label>
  <input type="number" onkeyup="calc(this);" name="qty'.$i.'" id="qty'.$i.'" readonly value="'.$r["qty"].'" size="8" ></td>
<td><input type="number" onkeyup="calc(this);" name="price'.$i.'" id="price'.$i.'" size="10" min="1" max="99" onchange="calc(this);" ></td>
<td><input type="number" onkeyup="calc(this);" name="discount'.$i.'" id="discount'.$i.'" size="10" min="0" max="99" onchange="calc(this);"></td>
<td><input type="number" name="total'.$i.'" id="total'.$i.'" size="10" min="1" max="99" onchange="calc(this);" ></td>
  </tr>';
  $i++;
    }
}
?>


<table width="400" border="0" align="right">
    <tr>
    <th scope="row">Grand Total</th>
     <td>:</td>
    <td><input name="grandtotal" id="grandtotal" type="text"></td>
  </tr>
</table>

<script>
     function calc(id) {
  var row = id.parentNode.parentNode;
  var quant = row.cells[3].getElementsByTagName('input')[0].value;
  var price = row.cells[4].getElementsByTagName('input')[0].value;
  var disc = row.cells[5].getElementsByTagName('input')[0].value;
  if (disc == null || disc == '') {
    res = parseFloat(quant) * parseFloat(price);
  } else {
    var res = (parseFloat(quant) * parseFloat(price)) - (parseFloat(quant) *     parseFloat(price) * (parseFloat(disc) / 100));
  }
  row.cells[6].getElementsByTagName('input')[0].value = res;
}
</script>

我設法計算每行總計

現在，我需要您的幫助來總計所有總計並將其值放入Grandtotal文本框中

Answer 1

我想表單中輸入元素之一的值的每次更改都應更新總計，對嗎？ 我將事件偵聽器放在form標記上以使其簡單。

<form id="your-form" method="post" action="">
    <!-- All your other inputs here -->
    <input type="text" name="grandtotal" id="grandtotal">
</form>

<script>
    document.querySelector('#your-form').addEventListener('change', function( event ) {
        if (event.target.id && event.target.id !== 'grandtotal') {
            var allTotals = document.querySelectorAll('input[name^="total"]'),
                allTotalSum = 0;

            Array.prototype.forEach.call(allTotals, function( element ) {
                if (element.value) {
                    allTotalSum += parseFloat(element.value);
                }
            });

            document.querySelector('#grandtotal').value = allTotalSum;
        }
    });
</script>

因此，在您輸入字段之一的每次更改時，總和都會更新。 此代碼未經測試。