Question

我有一个表，用户可以根据需要动态添加一行。我需要在表格下方添加一个文本框，该文本框将使用JavaScript动态输出最后一列的总和。如果计算不能动态完成，那么我可以在文本框下面添加一个计算按钮

    <HTML>
    <HEAD>

    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "text";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell2.appendChild(element2);

        var cell3 = row.insertCell(2);
            var element3 = document.createElement("input");
            element3.type = "text";
            cell3.appendChild(element3);

        var cell4 = row.insertCell(3);
            var element4 = document.createElement("input");
            element4.type = "text";
            cell4.appendChild(element4);

        var cell5 = row.insertCell(4);
            var element5 = document.createElement("input");
            element5.type = "text";
            cell5.appendChild(element5);

        var cell6 = row.insertCell(5);
            var element6 = document.createElement("input");
            element6.type = "text";
            cell6.appendChild(element6);

        var cell7 = row.insertCell(6);
            var element7 = document.createElement("input");
            element7.type = "text";
            cell7.appendChild(element7);
        }

    function Calculate(tableID) {????

    }

    </SCRIPT>
    </HEAD>
    <BODY>
<table id="dataTable">
<tr><td><input type="button" value="Add Row" onclick="addRow('dataTable')"/></td></tr>
<tr><td>Class Description</td><td>Class Code</td><td>Rate</td><td>Other</td><td>Final Rate</td><td>Exposure</td><td>Premium</td></tr>
<tr><td><input type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:50px" type="text"/></td><td><input style="width:50px" type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:90px" type="text"/></td></tr>
</table>
//Text box output total of Premium
</BODY>
</HTML>

非常感谢任何帮助。

Answer 1

小提琴中提供了答案，您需要迭代所有输入并计算字段：

function Calculate(tableID) {
var inputs = document.querySelectorAll("#" + tableID + " input");
var total = 0;
for (var i = 0; i < inputs.length; i++) {
    if (!isNaN(parseInt(inputs[i].value))) {
        total += parseInt(inputs[i].value);
    }
}
alert(total)
}

http://jsfiddle.net/KK47L/

您可以使用计算功能，并将结果反映在另一个div / cell / alert中。

使用动态添加的行计算Javascript

1 个答案: