Javascript 更新计算函数以包含动态添加的行_Javascript

Javascript 更新计算函数以包含动态添加的行

javascript

Javascript 更新计算函数以包含动态添加的行,javascript,Javascript,我有一个简单的函数来计算两个文本字段之间的差异：txtItemAmount1和txtAdjustmentAmount。它放置在标签中的差异（差异）我遇到的问题是，通过单击“添加行”按钮，用户可以添加更多的“txtItemAmount”行。我希望所有这些行都包括在计算中。例如，现在如果用户在txtAdjustmentAmount中输入“20.00”，在txtItemAmount1中输入“10.00”，则差异标签将显示“10.00”。如果单击“添加行”按钮并键入“1.00”，我希望该值也添加到此计

我有一个简单的函数来计算两个文本字段之间的差异：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>


调整金额：

差异：
项目金额：


函数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”）；
附肢儿童（tr）；
//txtItemAmount1
var tdItemAmount=document.createElement（“TD”）；
tr.appendChild（tdItemAmount）；
var p=document.createElement（“p”）；
t项目金额（p）；
var txtItemAmount=document.createElement（“输入”）；
p、 appendChild（txtItemAmount）；
txtItemAmount.id=“txtItemAmount”+iX；
setAttribute（'name'，'txtItemAmount'+iX）；
txtItemAmount.setAttribute（'size'，10）；
}
功能计算差异（txtAdjustmentAmount，txtItemAmount）
{   
var txtAdjustmentAmount=parseFloat（document.getElementById（'txtAdjustmentAmount'）.value）；
var txtItemAmount=parseFloat（document.getElementById（'txtItemAmount1'）.value）；
var差异=txtItemAmount-txtAdjustmentAmount；
document.getElementById（'Difference'）。innerHTML=Difference
}

这就是JavaScript框架的用武之地。如果为这些元素指定相同的类名，则可以轻松地从DOM中查询它们、循环它们并计算数量。忘记引用特定ID。

简化您的计算差异以不采用任何参数：

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

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

将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;
}

函数calcDifference（）
{   
var txtAdjustmentAmount=parseFloat（document.getElementById（'txtAdjustmentAmount'）.value）；
//存储txtItemAmount元素的总数
var合计=0；
//检索索引值
var iX=document.getElementById（“txtIndex”）.value；
for（var i=1；iThanks！这段代码在Firefox中运行得很好，但我的许多用户都有IE8，我了解到IE8不支持getElementsByClassName。我得到一个“对象不支持此属性或方法”错误。我该如何解决这个问题？我尝试过getElementsByTagName等。似乎什么都没想到。@baldwingrand:请参阅更新。更新应该可以在不使用GetElementsByCassName的情况下工作。太棒了！它现在可以工作了；我使用了您更新的代码。我还必须更改另一件事，因为IE不支持addEventListener，我添加了一个if如果使用IE浏览器，请使用attachEvent中的语句。现在在这两种浏览器中都非常有效。非常感谢您的帮助！
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;
}

<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="";
}

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;
}