如何通过在javascript中动态添加行来获取状态

Question

我想询问有关 javascript 中动态行的问题。我应该将值输入到字段结果中，然后字段状态将自动填充

pass

或

fail

。但是当我添加第二行时，我可以输入结果的值，但字段状态看不到

pass

或

fail

图片在这里

代码在这里

 // Run the check every time a key is pressed in an input
let allInputs = document.querySelectorAll("input");
allInputs.forEach(function(elem) {
    elem.addEventListener("keyup", function() {
      sum_method();
    });
});

// Run the check
function sum_method() {
    var result = parseInt(document.querySelector('[name="result"]').value);
    var value_from = parseInt(document.querySelector('[name="value_from"]').value);
    var value_to = parseInt(document.querySelector('[name="value_to"]').value);

    if (value_from <= result && result <= value_to) {
        document.querySelector('[name="status"]').value = 'pass';
    } else {
        document.querySelector('[name="status"]').value = 'fail';
    }
}

Answer 1

querySelector

仅返回第一个匹配项。如果您使用表格，您可以尝试以下操作：

const table = document.querySelectorAll('table#table-id tr');
for (const row of table) {
    sum_method(row);
}


// Run the check on a specific row
function sum_method(row) {
    var result = parseInt(row.querySelector('[name="result"]').value);
    var value_from = parseInt(row.querySelector('[name="value_from"]').value);
    var value_to = parseInt(row.querySelector('[name="value_to"]').value);

    if (value_from <= result && result <= value_to) {
        row.querySelector('[name="status"]').value = 'pass';
    } else {
        row.querySelector('[name="status"]').value = 'fail';
    }
}

如果您使用其他结构，或者这不起作用，请分享 HTML。