自動求和與所生成的場JS

Question

我有點卡住再次用JavaScript。基本上，當你點擊一個按鈕時，會出現一行新的字段，給它們一個新的名字只是一個不同的數字。

我現在需要這些字段由自理能夠自動求和，我可以與第一排我只是不知道如何與新產生的人做他們做到這一點。

的JavaScript代碼：

<script language="javascript" type="text/javascript"> 
     var i=2; 
     function addRow() 
{ 
     var tbl = document.getElementById('customersAdd'); 
     var lastRow = tbl.rows.length; 
     var iteration = lastRow - 1; 
     var row = tbl.insertRow(lastRow); 

     var firstCell = row.insertCell(0); 
     var el = document.createElement('input'); 
     el.placeholder = 'Quantity'; 
     el.type = 'text'; 
     el.name = 'quantity' + i; 
     el.id = 'quantity' + i; 
     firstCell.appendChild(el); 

     var secondCell = row.insertCell(1); 
     var el2 = document.createElement('input'); 
     el2.placeholder = 'Description'; 
     el2.type = 'text'; 
     el2.name = 'description' + i; 
     el2.id = 'description' + i; 
     secondCell.appendChild(el2); 

     var thirdCell = row.insertCell(2); 
     var el3 = document.createElement('input'); 
     el3.placeholder = 'Rate'; 
     el3.type = 'text'; 
     el3.name = 'rate' + i; 
     el3.id = 'rate' + i; 
     thirdCell.appendChild(el3); 

     var forthCell = row.insertCell(3); 
     var el4 = document.createElement('input'); 
     el4.placeholder = 'Amount'; 
     el4.type = 'text'; 
     el4.name = 'amount' + i; 
     el4.id = 'amount' + i; 
      forthCell.appendChild(el4); 
    // alert(i); 
     i++; 

    // alert(i); 
} 
function startCalc(){ 
    interval = setInterval("calc()",1); 
} 
function calc(){ 
    one = document.main.quantity1.value; 
    two = document.main.rate1.value; 
    document.main.amount1.value = (one * 1) * (two * 1); 

} 
function stopCalc(){ 
    clearInterval(interval); 
} 
</script> 

的HTML代碼：

<form action="submit.php" name="main" method="post"> 
<table style="border-collapse: collapse;" border="0" align="center" width="50%" class="horiz" id="customersAdd"> 
    <tr> 

    <td align="center"><br/> 
    <input class="text" style="width:100%" type="button" align="middle"value="Add Aditional Row" onClick="addRow()" /></td> 
    </tr> 
    <tr align="center"> 

    <td> 
     <br /> 
     <input placeholder="Quantity" type="text" name="quantity1" id="quantity1" onFocus="startCalc();" onBlur="stopCalc();" /> 
     <br /></td> 
    <td> 
     <br /> 
     <input placeholder="Description" type="text" name="description1" id="description1"/> 
     <br /></td> 
    <td> 
     <br /> 
     <input placeholder="Rate" type="text" name="rate1" id="rate1" onFocus="startCalc();" onBlur="stopCalc();"/> 
     <br /></td> 
    <td> 
     <br /> 
     <input placeholder="Amount" type="text" name="amount1" id="amount1" onBlur="stopCalc();" onFocus="startCalc();" readonly="true" /> 
     <br /></td> 
</tr> 

</table></form> 

爲了讓任何人事情變得更容易誰可以幫我，我已經在JSBin做這個，看看它更容易的我想要什麼去做。任何建議表示讚賞。

http://jsbin.com/atabaz/1/edit

感謝

Answer 1

最後，我設法找到如何做這自己的方式，如果有人有興趣看看這個：

http://jsfiddle.net/2sYgE/

var currentItem = 1; 

$('#customersAdd').on('keyup', '.quantity, .rate, .amount', calculateRow); 

$('#addnew').click(function() { 
    currentItem++; 

    $('#customersAdd').append('<tr><td><input placeholder="Quantity" type="text" name="quantity' + currentItem +'" id="quantity' + currentItem +'" class="qty form-input-rate" /></td><td><input placeholder="Description" type="text" name="description' + currentItem +'" id="description' + currentItem +'" class="form-input-rate"/></td><td><input placeholder="Rate" type="text" name="rate' + currentItem +'" id="rate' + currentItem +'" class="rate form-input-rate"/></td><td><input placeholder="Amount" type="text" name="amount' + currentItem +'" id="amount' + currentItem +'" class="cal form-input-rate"/></td></tr>' 
    ); 
}); 

function calculateSum() { 
    var sum = 0; 
    $(".cal").each(function() { 
     if (!isNaN(this.value) && this.value.length != 0) { 
      sum += parseFloat(this.value); 
     } 
    }); 

} 

function calculateRow() { 
    var cost = 0; 
    var $row = $(this).closest("tr"); 
    var qty = parseFloat($row.find('.qty').val()); 

    // changed the following line to only look within the current row 
    var rate = parseFloat($row.find('.rate').val()); 

    cost = qty * rate; 

    if (isNaN(cost)) { 
     $row.find('.cal').val("0"); 
    } else { 
     $row.find('.cal').val(cost); 
    } 
    calculateSum(); 
} 

Answer 2

輪詢更改是做表單更新，效率非常低，而且容易出錯的方式。監聽更改事件是更好的方式，因爲它使用更少的資源，並等待用戶完成更新控件之後再執行任何操作。還有一個可以使用的輸入事件，但這不適用，因爲它會在用戶輸入值時更新表單。更好地等待用戶完成輸入值，然後進行更新。

我下面再分解你的代碼，這是不能用於生產，但它應該給你如何去它的一些想法。錶行被克隆，因爲它比從零開始創建所有元素要快得多。然後名字被修改，雖然這不是必要的。不需要ID屬性。

克隆只有當在線聽衆在窗體控件使用可靠地工作在這裏。如果最初的聽衆是動態連接，你就必須給他們各自的偵聽器的使用的addEventListener不添加克隆中添加一行時添加。

我沒有包含在任何輸入驗證，如果用戶將在垃圾，他們收到垃圾回來。您應驗證輸入以檢查是否輸入了適當的值，並格式化顯示的值。

<script type="text/javascript"> 
    function addRow(element) { 
     var form = element.form; 
     var table = form.getElementsByTagName('table')[0]; 
     var tbody = table.tBodies[0]; 
     var num = tbody.rows.length - 1; 
     var row = table.rows[1].cloneNode(true); 
     var input, inputs = row.getElementsByTagName('input') 

     // Update input names 
     for (var i=0, iLen=inputs.length; i<iLen; i++) { 
     input = inputs[i]; 
     input.name = input.name.replace(/\d+$/,num); 
     input.value = ''; 
     } 
     tbody.insertBefore(row, tbody.rows[tbody.rows.length - 1]); 
    } 

    function updateRow(element) { 
    var form = element.form; 
    var num = element.name.replace(/^\D+/,''); 
    var value = form['quantity' + num].value * form['rate' + num].value; 
    form['amount' + num].value = (value == 0)? '' : value; 
    updateTotal(form); 
    } 

    function updateTotal(form) { 
    var elements = form.elements; 
    var name = /^amount/; 
    var total = 0; 
    var value; 

    for (var i=0, iLen=elements.length; i<iLen; i++) { 
     if (name.test(elements[i].name)) { 
     total += parseFloat(elements[i].value); 
     } 
    } 
    form.total.value = total; 
    } 
</script> 

<form action="submit.php" name="main" method="post"> 
    <table style="border-collapse: collapse;" border="0" align="center" 
    width="50%" class="horiz" id="customersAdd"> 
    <tr> 
     <td><br> 
     <input class="text" style="width:100%" type="button" 
     align="middle"value="Add Aditional Row" onclick="addRow(this)"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input placeholder="Quantity" name="quantity1" onblur="updateRow(this);"> 
     </td> 
     <td> 
     <input placeholder="Description" type="text" name="description1"> 
     </td> 
     <td> 
     <input placeholder="Rate" name="rate1" onchange="updateRow(this);"> 
     </td> 
     <td> 
     <input placeholder="Amount" name="amount1" readonly> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="3" style="text-align: right">Total&nbsp; 
     <td><input name="total" readonly> 
    </tr> 
    </table> 
    <input type="reset"> 
</form>