0

私は再び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

ありがとう

4

2 に答える 2

0

変更のポーリングは非常に効率が悪く、エラーが発生しやすいフォーム更新方法です。変更イベントをリッスンする方が良い方法です。使用するリソースが少なく、ユーザーがコントロールの更新を完了するまで待ってから何かを行うからです。使用できる入力イベントもありますが、ユーザーが値を入力するとフォームが更新されるため、ここでは適していません。ユーザーが値の入力を完了するのを待ってから、更新を行う方がはるかに優れています。

以下のコードをリファクタリングしました。本番環境の準備はできていませんが、どのように実行するかについてのアイデアが得られるはずです。すべての要素を最初から作成するよりもはるかに高速であるため、テーブルの行が複製されます。次に、名前が変更されますが、これは実際には必要ありません。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>
于 2013-04-22T01:37:35.997 に答える