使用动态添加的行计算 Javascript答案

【问题标题】：Calculate Javascript with dynamically added rows使用动态添加的行计算 Javascript
【发布时间】：2014-04-24 15:07:17
【问题描述】：

我有一个表，用户可以根据需要动态添加一行。我需要在表格下方添加一个文本框，该文本框将使用 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>

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html dynamic calculated-columns

【解决方案1】：

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

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

【讨论】：

始终使用基数参数：parseInt(x, 10)。来自 Mdn：If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet. For this reason always specify a radix when using parseInt.
有效，但 OP 说它应该计算最后一列，而不是每一行。
究竟需要计算什么？
只是最后一列的合计，并在表格下方的文本框中输出结果
好的，只取“溢价”输入并计算其总数。小提琴已更新。