javascript - Autosum 与生成的字段 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>