Question

我有一个简单的函数来计算两个文本字段之间的区别：txtItemAmount1和txtAdjustmentAmount。它放在标签上的差异（差异）。

我遇到的问题是，通过单击“添加行”按钮，用户可以添加更多“txtItemAmount”行。我希望所有这些行都包含在计算中。例如，现在如果用户在txtAdjustmentAmount中输入“20.00”，在txtItemAmount1中输入“10.00”，则差异标签将显示“10.00”。如果我单击“添加行”按钮，并输入“1.00”我希望它也添加到此计算中，因此差异将为“11”。有人可以提供一个代码示例，说明如何在计算中合并这些新添加的字段吗？

谢谢！

<body>
<form name="frmInput" id="frmInput">

<table>
<tr>
    <td><p><label for="AdjustmentAmount">Adjustment Amount:</label></p></td>
    <td><p><input name="txtAdjustmentAmount" type="text" id="txtAdjustmentAmount" size="10" maxlength="10"></p></td>
</tr>
</table>

<table>
<tr>
    <td><p><strong><font color="#FF0000">Difference:<label for="Difference" id="Difference"></label></font></strong></td>
</tr>
</table>

<table id="tblDetail">
<tbody>
    <tr>
        <td colspan="6">Item Amount:</td>
    </tr>
    <tr>
        <td colspan="6">
        <input type="button" class="button" value= "Add Row" id="btnNewRow" name="btnNewRow" onClick="javascript:addNewRow();">
        <input type="hidden" id="txtIndex" name="txtIndex" value="1">
        </td>
    </tr>

    <tr>
        <td>
        <p>
        <input name="txtItemAmount1" type="text" id="txtItemAmount1" size="10" maxlength="10" 
            onKeyUp="calcDifference(frmInput.txtItemAmount1.value, frmInput.txtAdjustmentAmount.value)">
        </p>
        </td>
    </tr>
</tbody>
</table>
</form>



<script language="javascript">

function addNewRow()
{
var iX = document.getElementById("txtIndex").value;
iX ++;
document.getElementById("txtIndex").value = iX;

var tbl = document.getElementById("tblDetail").getElementsByTagName("TBODY")[0];
var tr = document.createElement("TR");
tbl.appendChild(tr);



//txtItemAmount1
var tdItemAmount = document.createElement("TD");
tr.appendChild(tdItemAmount);

var p = document.createElement("P");
tdItemAmount.appendChild(p);

var txtItemAmount = document.createElement("input"); 
p.appendChild(txtItemAmount);

txtItemAmount.id = "txtItemAmount" + iX;
txtItemAmount.setAttribute('name','txtItemAmount' + iX);
txtItemAmount.setAttribute('size',10);
}


function calcDifference(txtAdjustmentAmount, txtItemAmount) 
{   
var txtAdjustmentAmount = parseFloat(document.getElementById('txtAdjustmentAmount').value);
var txtItemAmount   = parseFloat(document.getElementById('txtItemAmount1').value); 
var Difference = txtItemAmount - txtAdjustmentAmount; 
document.getElementById('Difference').innerHTML = Difference
}
</script>

</body>

Answer 1

简化您的calcDifference不带参数：

<input class="txtItemAmount" name="txtItemAmount1" type="text" id="txtItemAmount1" size="10" maxlength="10" 
onKeyUp="calcDifference()">

将这些行添加到addRow函数中：

txtItemAmount.className = "txtItemAmount";   // Add a class you can reference later
txtItemAmount.addEventListener('keyup',calcDifference,false); // Add the key up handler

更改calcDifference（）以查看类“txtItemAmount”的所有元素：

function calcDifference()
{   

    var txtAdjustmentAmount = parseFloat(document.getElementById('txtAdjustmentAmount').value);

    // Stores total of txtItemAmount elements
    var total = 0;

    var items = document.getElementsByClassName("txtItemAmount");

    for(var i=0; i<items.length; i++) {
        // Parse each value
        var itemVal = parseFloat(items[i].value);
        // Add it to the total if it is a legal number
        if(!isNaN(itemVal)) {
            total += itemVal;
        }
    }

    // Subtract the adjustment from the total
    document.getElementById('Difference').innerHTML = total - txtAdjustmentAmount;
}

<强>更新

如果您需要IE支持，无需重写或获取第三方getElementsByClassName函数（http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/），您可以这样做：

您已在隐藏输入txtIndex中跟踪元素计数。您可以使用它来查看1-txtIndex中的每个元素。这样做的问题是，当您刷新页面时，此输入可能会持续存在，这意味着您的索引将与您的页面内容不匹配。你应该做的是保持一个全局定义的变量（如iX）来跟踪这些信息，或者确保你在页面加载时重置txtIndex并使用它来获取每个元素。假设后者：

向body元素添加init调用：

<body onload="init()">

添加初始化值的初始化函数：

function init()
{
    document.getElementById("txtIndex").value=1;

    // You could also clear out txtAdjustmentAmount and txtItemAmount1, 
    // if you don't want these to persist after reloading the page
    document.getElementById("txtAdjustmentAmount").value="";
    document.getElementById("txtItemAmount1").value="";
}

更改calcDifference以使用txtIndex和getElementById：

function calcDifference()
{   

     var txtAdjustmentAmount = parseFloat(document.getElementById('txtAdjustmentAmount').value);

     // Stores total of txtItemAmount elements
     var total = 0;

     // Retrieve index value
     var iX = document.getElementById("txtIndex").value;

     for(var i=1; i<=iX; i++) {
         // Get value:
         var item = document.getElementById("txtItemAmount"+i);
         // Parse each value
         var itemVal = parseFloat(item.value);
         // Add it to the total if it is a legal number
         if(!isNaN(itemVal)) {
             total += itemVal;
         }
     }

     // Subtract the adjustment from the total
     document.getElementById('Difference').innerHTML = total - txtAdjustmentAmount;
}

Answer 2

这是JavaScript框架派上用场的地方。如果您为这些元素指定相同的类名，则可以轻松地从DOM中查询它们，循环遍历它们并计算您的金额。忘记引用特定的ID。

更新计算功能以包括动态添加的行

2 个答案: