Question

我希望获得两个输入字段的产品并在不提交表单的情况下显示它。我已经使用了数组并提供了添加/删除行的规定，并使用了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>

Answer 1

它不起作用的原因是因为你的calc函数按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>

编辑：创建了一个Fiddle来说明

onchange用于动态添加的行

1 个答案: