javascript - 输入相应行中的数字时动态计算 - Javascript

Question

学生行中有 m 个学生 和 n 个条件 列，同一行中有一个总计列。但仅输入相应行的数字时，必须动态计算总数。需要什么修改？以这种方式，第一行中的所有输入被求和。但只需要逐行求和。

<script>
    var num=[];
    function recalculate(rowData,studCode) {        
        var n = document.getElementById('criteria_count').value;    
        num.push(parseFloat(document.getElementById('criteria_mark_'+rowData).value));
        var total=0;

        for (var i = 0; i <n; i++) {
            total = total + parseFloat(num[i]) ;
            if (!isNaN(total)) {
                document.getElementById('total_mark_'+studCode).value = Math.round(total);
            }
        }      
    }
</script>

Answer 1

希望我正确理解您的要求。我制作了一个 JSFiddle 详细说明了如何实现您所解释的内容(假设我正确理解了您)。

https://jsfiddle.net/z0d4y8ao/12/

这会遍历指定行上的每一行，计算总数并将其单独放入结果元素中。

如果您使用此代码，请记住它是原始 JavaScript，您必须自己找到结果，以便可以插入总值(我个人使用服务器端语言创建唯一的 ID。)。

function calcNewVal(rowID)
{
    var row = document.getElementById(rowID);
    var tdCount = row.childElementCount - 1;
    var total = 0;
    var currentTd = null;

    var resultText = document.getElementById('result0');

    for(var i = 0; i < tdCount; i++)
    {
        currentTd = row.children[i].childNodes[0].value;
        total += parseInt(currentTd);
    }

    console.log(total);

    resultText.innerHTML = total;
}

html:

<table id="myTable">
<tr>
    <th>Subject1</th>
    <th>Subject2</th>
    <th>Subject3</th>
    <th>Result</th>
</tr>
<tr onchange="calcNewVal(this.id)" id="row0">
    <td><input type="text" value="13"></td>
    <td><input type="text" value="13"></td>
    <td><input type="text" value="13"></td>
    <td id="result0"></td>
</tr>
<tr id="row1">
    <td><input type="text" value="13"></td>
    <td><input type="text" value="13"></td>
    <td><input type="text" value="13"></td>
    <td id="result1"></td>
</tr>