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() {语法。
通过添加input属性将小计readonly元素设为只读，否则用户可以更改计算的总数。
如果您回复blur事件，您将获得更具响应性的效果，而不是回复input事件。我建议通过JavaScript绑定事件处理程序，而不是通过HTML属性绑定。
我会在你的元素中修复一些拼写错误（但也许它们用你的母语有意义）：数量与＆＃39; a＆＃39;，UnitPrice没有＆＃39; e＆＃39;。

您可以使用querySelectorAll通过CSS选择器选择元素，然后Array.from迭代它们。

请参阅以下2行代码段：

＆＃13;

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);

＆＃13;

input { max-width: 7em }

＆＃13;

<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>

＆＃13;

需要数组字段的帮助

1 个答案: