onchange動態添加行

我希望獲得兩個輸入字段的產品並在不提交表單的情況下顯示它。我已經使用了數組並且提供了添加/刪除行的規定，並使用了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>

來源

2015-11-10 Satish Jagtap

原來是你，或者你不使用'jquery'？因爲你已經顯示了香草JS代碼。 – prodigitalson

它不工作的原因是因爲你的計算函數按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說明

來源

2015-12-09 20:22:57 isick

它不清楚他是否要使用jQuery，所以這裏是一個[使用jQuery的不顯眼的例子]（http://jsfiddle.net/r9L424tj/6/） – prodigitalson

非常感謝@isick。你能幫我加上所有'小計'的'總和'嗎？ –

很多人@prodigitalson –

onchange動態添加行

回答

相關問題