使用动态添加的行计算Javascript

Calculate Javascript with dynamically added rows

本文关键字：计算 Javascript 添加 动态      更新时间：2023-09-26

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

任何帮助都将不胜感激。

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

相关文章：