Php 动态添加行的onchange

我希望得到两个输入字段的结果，并在不提交表单的情况下显示它。我使用了数组，并为添加/删除行做了准备，还使用了onchange函数来获取产品。对于第一个数组，它可以正常工作，但对于数组的其余部分则不行。请建议。下面是代码

    <script>
function calc(A,B,SUM) {
  var one = document.getElementById(A).value;
  var two = document.getElementById(B).value; 
  document.getElementById(SUM).value = one * two;
}

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 70){                // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i <colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;

        }
    }else{
         alert("Maximum rows allowed are 70.");

    }
}

function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            if(rowCount > 1){
                    table.deleteRow(rowCount-1);
            }

            }catch(e) {
                alert(e);
            }
        }
</script>   



<form name="form" method="post">
<table id="wo_amt_table2" class="form" border=1px;>
<tr>    
    <td><input type="text" name="wo_qty[]" id="wo_qty" style="width: 100%" onChange="calc('wo_qty','wo_rate','wo_amt')"></td>
    <td><input type="text" class="small" id="wo_rate"  name="wo_rate[]" style="width: 100%" onChange="calc('wo_qty','wo_rate','wo_amt')"></td>          
    <td><input type="text" class="small" id="wo_amt" name="wo_amt[]" style="width: 100%" required readonly style="border:0px"></td>
</tr>   
    <input type="button" value="Add Row" onClick="addRow('wo_amt_table2')" />   
    <input type="button" value="Delete Row" onClick="deleteRow('wo_amt_table2')" /> 
</form>

函数计算（A、B、和）{
var one=document.getElementById（A）.value；
var two=document.getElementById（B）.value；
document.getElementById（SUM）.value=1*2；
}
函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
如果（rowCount<70）{//限制用户创建超出限制的字段
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
对于（变量i=0；i 1）{
表1.deleteRow（rowCount-1）；
}
}捕获（e）{
警报（e）；
}
}

它不起作用的原因是您的calc函数选择了by ID（它将只检索具有该ID的元素的第一次出现）。在您的情况下，每次更改任何行时，都会重新计算第一行的值。这有意义吗

我认为最好的解决办法如下：

function calc(thisRow){
    var one = thisRow.getElementsByTagName('input')[0].value;
    var two = thisRow.getElementsByTagName('input')[1].value;
    thisRow.getElementsByTagName('input')[2].value = one * two;
}

然后行定义应该如下所示

<tr>    
    <td><input type="text" name="wo_qty[]" style="width: 100%" onChange="calc(this.parentElement.parentElement)"></td>
    <td><input type="text" class="small" name="wo_rate[]" style="width: 100%" onChange="calc(this.parentElement.parentElement)"></td>          
    <td><input type="text" class="small" name="wo_amt[]" style="width: 100%" required readonly style="border:0px"></td>
</tr>   

---

编辑：创建了一个示例来说明

您也是，还是您没有使用

jquery

？因为你已经展示了普通的JS代码。不清楚他是否想使用jQuery，所以这里有一个非常感谢@isick。你能帮我在所有的“小计”中加上“大总和”吗？许多thaks@prodigitalsonI很乐意帮忙，但先结束这个问题，然后再打开一个新的问题，这被认为是一种良好的做法。但我会给你这个提示。。。总计的唯一更改时间是删除一行或重新计算新行时。这意味着，如果您创建一个函数对小计进行求和，您可以在

deleteRow

和

calc

函数中调用它，以自动反映更改。@isick。。。搞不懂。请帮忙。