javascript - 如何在输入字段上获取数组值

Question

所以我有多个表数据插入，我想在某个字段上获取输入值，以便我可以在另一个字段上进行计算。如果那是一个数组字段，我该怎么做？

我试过使用 javascript，但它只适用于第一个字段(不是数组字段)。

function tot() {
    var txtFirstNumberValue = document.getElementById('price').value;
    var txtSecondNumberValue = document.getElementById('qty').value;
    var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
    if (!isNaN(result)) {
        document.getElementById('total').value = result;
    }
}

$(document).ready(function(){
    $("#btn-add-form").click(function(){
        var addi = parseInt($("#addi-form").val());
        var nextform = addi + 1;
        $("#insert-form").append("<b>Item Price " + nextform + " :</b>" +
            "<input type='text' name='names[]' required>"
            "<input id='price' type='text' name='price[]' onkeyup='tot();' required>"
            "<input id='qty' type='text' name='qty[]' onkeyup='tot();' required>"
            "<input type='text' name='total[]' required>"
        $("#addi-form").val(nextform);
    });
    $("#btn-reset-form").click(function(){
        $("#insert-form").html("");
        $("#addi-form").val("1");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btn-add-form">Add</button>
<button type="button" id="btn-reset-form">Reset</button><br><input type="text" name="names[]" required>
<input id="price" type="text" name="price[]" onkeyup="tot();" required>
<input id="qty" type="text" name="qty[]" onkeyup="tot();" required>
<input id="total" type="text" name="total[]" required>
<div id="insert-form"></div>

我希望这种方式适用于添加的数组表，但事实并非如此，它只影响我的第一个表上的字段。

Answer 1

您不能将相同的 ID 分配给同一页面上的多个 DOM 元素。我已经稍微更新了您的代码以使用带有 ID 的商品编号。例如，对于商品 1，ID 是 price，对于商品 2，ID 是 price-2，对于商品 3 ID是price-3等等。 qty 和 total 也是如此。

你可以试试这个代码:

function sum_total() {
    var totalSum = 0;
    var calcTotalSum = document.getElementsByClassName("calc-total");
    var totalItems = calcTotalSum.length;
    var i = 0;
    while(i < totalItems) {
        if (calcTotalSum[i].value !== "") {
            totalSum = totalSum + parseInt(calcTotalSum[i].value);
        }
        i += 1;
    }
    if(totalSum > 0) {
        console.log("Total Sum is: ", totalSum);
    }
}

function tot(event) {
    var itemNo = event.target.getAttribute("data-item");
    var txtFirstNumberValue = "";
    var txtSecondNumberValue = "";    
    if (itemNo) {
        txtFirstNumberValue = document.getElementById('price-' + itemNo).value;
        txtSecondNumberValue = document.getElementById('qty-' + itemNo).value;        
    } else {
        txtFirstNumberValue = document.getElementById('price').value;
        txtSecondNumberValue = document.getElementById('qty').value;
    }
    
    var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
    if (!isNaN(result)) {
        if (itemNo) {
            document.getElementById('total-' + itemNo).value = result;
        } else {
            document.getElementById('total').value = result;
        }
    }
    
    sum_total();
}

$(document).ready(function(){
    $("#btn-add-form").click(function(){
        var addi = parseInt($("#addi-form").val());
        var nextform = addi + 1;
        $("#insert-form").append("<b>Item Price " + nextform + " :</b>" +
            "<input type='text' name='names[]' required>" +
            "<input id='price-" + nextform + "' data-item='" + nextform + "' type='text' name='price[]' onkeyup='tot(event);' required>" +
            "<input id='qty-" + nextform + "' data-item='" + nextform + "' type='text' name='qty[]' onkeyup='tot(event);' required>" +
            "<input id='total-" + nextform + "' class='calc-total' type='text' name='total[]' required>"
        );
        $("#addi-form").val(nextform);
    });
    $("#btn-reset-form").click(function(){
        $("#insert-form").html("");
        $("#addi-form").val("1");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btn-add-form">Add</button>
<button type="button" id="btn-reset-form">Reset</button><br>
<input type="hidden" name="addi-form" id="addi-form" value=1 required>
<input type="text" name="names[]" required>
<input id="price" type="text" name="price[]" onkeyup="tot(event);" required>
<input id="qty" type="text" name="qty[]" onkeyup="tot(event);" required>
<input id="total" class="calc-total" type="text" name="total[]" required>
<div id="insert-form"></div>

希望对你有帮助。

编辑: sum_total 函数计算总金额之和。