需要幫助陣列場

Question

這個劇本對我來說工作得很好：

<script> 
calculate = function(){ 

    var resources = document.getElementById('a1').value; 
    var minutes = document.getElementById('a2').value; 
    document.getElementById('a3').value = parseInt(resources)* parseInt(minutes); 


} 
</script> 

<form action="ProvideMedicinProcess.php" class="register" method="POST"> 
      <table id="dataTable" border="1"> 
       <tbody> 
       <tr> 
        <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td> 
        <td><input type="datetime-local" required="required" name="VisitDate[]"></td> 
        <td> 

         <input class="form-control"type="text" required="required" placeholder="Symptoms" name="Symptoms[]"> 
        </td> 

        <td> 
         <input class="form-control" type="text" required="required" placeholder="GivenMedicin" name="GivenMedicin[]"> 
        </td> 

        <td> 
         <input id="a1" class="form-control" type="text" required="required" placeholder="UnitePrice" name="UnitePrice[]" onblur="calculate()" > 
        </td> 

        <td> 
         <input id="a2" class="form-control" type="text" required="required" placeholder="Quentity" name="Quentity[]" onblur="calculate()" > 
        </td> 

        <td> 
         <input id="a3" class="form-control" type="text" required="required" placeholder="SubTotal" name="SubTotal[]" > 
        </td> 
       </tr> 
       </tbody> 
      </table> 

     <input type="button" value="Add" onClick="addRow('dataTable')" /> 
     <input type="button" value="Remove" onClick="deleteRow('dataTable')" /> 
     <input class="submit" type="submit" value="Confirm" /> 
     <input type="hidden" value="<?php echo $PatientIDSearch ?>" name="PatientIDSearch" /> 
</form> 

但是我需要計算所有小計

Answer 1

的一些問題：

• 如果添加行，你會必須避免在HTML中獲得重複的id屬性值。將它們刪除並通過名稱識別input元素可能是最容易的，這些元素不必是唯一的
• 分配給非聲明變量是個不好的做法。使用var，對於函數，您可以使用function calculate() {語法。
• 通過添加readonly屬性使小計input元素爲只讀，否則用戶可以更改計算的總數。
• 如果您對input事件做出響應，您將獲得更具響應性的效果，而不是對blur事件做出響應。我建議通過JavaScript綁定事件處理程序，而不是通過HTML屬性。
• 我會修正你的元素中的一些拼寫錯誤（但也許它們在你的母語中是有意義的）：數量帶有'a'，UnitPrice沒有'e'。

您可以使用querySelectorAll通過CSS選擇器選擇元素，然後使用Array.from來迭代它們。

見下面2行片段：

function calculate(){ 
 
    var unitPrices = document.querySelectorAll('[name=UnitPrice\\[\\]]'); 
 
    var quantities = document.querySelectorAll('[name=Quantity\\[\\]]'); 
 
    var subTotals = document.querySelectorAll('[name=SubTotal\\[\\]]'); 
 
    var grandTotal = 0; 
 
    Array.from(subTotals, function (subTotal, i) { 
 
     var price = +unitPrices[i].value * +quantities[i].value; 
 
     subTotal.value = price; 
 
     grandTotal += price; 
 
    }); 
 
    // Maybe you can also display the grandTotal somehwere. 
 
} 
 

 
document.querySelector('form').addEventListener('input', calculate);

input { max-width: 7em }

<form action="ProvideMedicinProcess.php" class="register" method="POST"> 
 
    <table id="dataTable" border="1"> 
 
     <tbody> 
 
     <tr> 
 
      <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td> 
 
      <td><input type="datetime-local" required="required" name="VisitDate[]"></td> 
 
      <td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td> 
 
      <td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td> 
 
      <td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td> 
 
      <td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"></td> 
 
      <td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td> 
 
     </tr> 
 
     <tr> 
 
      <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td> 
 
      <td><input type="datetime-local" required="required" name="VisitDate[]"></td> 
 
      <td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td> 
 
      <td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td> 
 
      <td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td> 
 
      <td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"" ></td> 
 
      <td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 
</form>