需要帮助阵列场

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>