0

「追加」ボタンと「削除」ボタンを使用して、動的に追加する行の 2 つの入力フィールドを乗算しようとしています。私は、すべての製品を合計して下部に合計する別のJavaScript作業を行っています。

以下の例では、下部にあるすべての z フィールドの合計を既に取得できますが、各行で x と y の積を取得する方法に問題があります。私が使用している合計JavaScriptは、クラス「z」ですべてを取得し、それらを合計します

合計に使用しているJavaScriptは以下です。問題は、行数がわからないことです。name 属性と ID 属性に 1、2、3 などが追加されます。

    [x] *  [y] =  [z]?
    [x1] * [y1] = [z1]?
    [x2] * [y2] = [z2]?


        [z+z1+z2]


    <script type="text/javascript">
    function calcz() {
   var inputs = document.getElementsByClassName('z');
    var sum = 0;
    for(var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        var num = Number(input.value);

        if(isNaN(num)) { 
            alert('Please Enter a valid number: ' + input.value);
            num = 0;
        }

        sum += num;
    }

    document.getElementById('zresult').value = '$' + sum;
4

1 に答える 1

0

これはあなたにアイデアを与えるはずです：

<div id="table">
    <div class="row">
        <input type="text" class="x"/>
        <input type="text" class="y"/>
        <input type="text" class="z"/>
    </div>
    <div class="row">
        <input type="text" class="x"/>
        <input type="text" class="y"/>
        <input type="text" class="z"/>
    </div>
</div>
<input type="text" id="total"/>
<button onclick='addRow()'> + Row</button>
<button onclick='removeRow()'> - Row</button>
<button onclick='calc()'>Calc</button>

<script type="text/javascript">
    function calc() {
        var rows = document.getElementsByClassName('row');
        var total = document.getElementById('total');

        var zTotal = 0;

        for(var rowIdx = 0; rowIdx < rows.length; rowIdx++) {
            var row = rows[rowIdx];
            var inputX = row.getElementsByClassName('x')[0];
            var inputY = row.getElementsByClassName('y')[0];
            var inputZ = row.getElementsByClassName('z')[0];

            var x = Number(inputX.value);
            var y = Number(inputY.value);
            var z = x * y;

            inputZ.value = z;

            zTotal += z;
        }
        total.value = zTotal;
    }

    function addRow() {
        var table = document.getElementById('table');

        var row = document.createElement('div');
        row.setAttribute('class', 'row');
        row.type = 'text';

        var inputX = document.createElement('input');
        inputX.setAttribute('class', 'x');
        inputX.type = 'text';

        var inputY = document.createElement('input');
        inputY.setAttribute('class', 'y');
        inputY.type = 'text';

        var inputZ = document.createElement('input');
        inputZ.setAttribute('class', 'z');
        inputZ.type = 'text';

        row.appendChild(inputX);
        row.appendChild(inputY);
        row.appendChild(inputZ);
        table.appendChild(row);
    }

    function removeRow() {
        var table = document.getElementById('table');
        if (table.children.length > 1) {
            var row = table.childNodes[table.children.length - 1];
            table.removeChild(row);
        }
    }

</script>

user1202589 の編集

<script LANGUAGE="JavaScript">
// Last updated 2006-02-21
function addRowToTable()
{
  var tbl = document.getElementById('myTable');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);

  // left cell
 var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  var el = document.createElement('input');
  el.type = 'text';
 el.name = 'service_description' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 55;
  cellLeft.appendChild(el);


  cellLeft.appendChild(textNode);

  // right cell
  var cellRight = row.insertCell(1);
  var eel = document.createElement('input');
  eel.type = 'text';
  eel.name = 'term' + iteration;
  eel.id = 'txtRow' + iteration;
  eel.size = 4
  cellRight.appendChild(eel);


  var cellRight1 = row.insertCell(2);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'x' + iteration;
  el.id = 'txtRow' + iteration;
  el.setAttribute('class', 'x');
  el.onblur = function(){calc();};
  el.class = 'x'
  el.size = 4;
  cellRight1.appendChild(el);

  var cellRight2 = row.insertCell(3);
  var el = document.createElement('input');
  el.type = 'text';
  el.setAttribute('class', 'y');
  el.onblur = function(){productcalc();};
  el.name = 'y' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 4;
  cellRight2.appendChild(el);

  var cellRight4 = row.insertCell(5);
  var el = document.createElement('input');
  el.setAttribute('class', 'mrc');
  el.onblur = function(){calcmrc('mrc','mrcresult');};
  el.type = 'text';
  el.name = 'mrc' + iteration;
  el.id = 'mrc';
  el.size = 4;
  cellRight4.appendChild(el);


  }
  function removeRowFromTable()
  {
  var tbl = document.getElementById('myTable');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
  }



<div  class="row" align="center">
<p>
<input type="button" class="formbutton" value="Add" onclick="addRowToTable();" />
<input type="button" class="formbutton" value="Remove" onclick="removeRowFromTable();" />
</p>
<p>
</p>
<table width="75%" border="1" id="myTable">
  <tr >
    <td >Service Description</td>
    <td>Term</td>
    <td>x</td>
    <td>y</td>

    <td>MRC</td>
 </tr>
  <tr>
    <td><input type="text" name="service_description"
      "id="txtRow1" size='55'   /></td>

    <td><input type="text" name="term" class="term" 
     value="36 Month" id="txtRow1" size='4'   /></td>

    <td><input type="text" name="x" class="x"
      id="txtRow1" onBlur="productcalc()" size='4'  /></td>
   <td><input type="text"  name="y" class="y"
     id="txtRow1" size='4' onBlur="productcalc()" /></td>




   <td>
    <input type="text" name="mrc" 
    class="mrc"  onBlur="calcmrc('mrc','mrcresult')" id="mrc" size='4'  />


    </td>



変更はほとんどありません。これはあなたが探しているものか、少なくとも正しい方向にあると思います。

cript type="text/javascript">
    // Last updated 2006-02-21
    function addRowToTable()
    {
        var tbl = document.getElementById('tblBlock').tBodies[0];
        var lastRow = tbl.rows.length;
        // if there's no header row in the table, then iteration = lastRow + 1
        var iteration = lastRow + 1;
        var row = tbl.insertRow(lastRow);

        // left cell
        var cellLeft = row.insertCell(0);
        var el = document.createElement('input');
        el.type = 'text';
        el.name = 'service_description' + iteration;
        el.id = 'txtRow' + iteration;
        el.size = 55;
        cellLeft.appendChild(el);

        var textNode = document.createTextNode(iteration);
        cellLeft.appendChild(textNode);

        // right cell
        var cellRight = row.insertCell(1);
        var eel = document.createElement('input');
        eel.type = 'text';
        eel.name = 'term' + iteration;
        eel.id = 'txtRow' + iteration;
        eel.size = 4
        cellRight.appendChild(eel);

        var cellRight1 = row.insertCell(2);
        var el = document.createElement('input');
        el.type = 'text';
        el.name = 'price' + iteration;
        el.id = 'txtRow' + iteration;
        el.setAttribute('class', 'price');
        el.onblur = function() { productcalc(); };
        el.class = 'price'
        el.size = 4;
        cellRight1.appendChild(el);

        var cellRight2 = row.insertCell(3);
        var el = document.createElement('input');
        el.type = 'text';
        el.setAttribute('class', 'qt');
        el.onblur = function() { productcalc(); };
        el.name = 'qt' + iteration;
        el.id = 'txtRow' + iteration;
        el.size = 4;
        cellRight2.appendChild(el);

        var cellRight3 = row.insertCell(4);
        var el = document.createElement('input');
        el.type = 'text';
        el.name = 'nrc' + iteration;
        el.setAttribute('class', 'nrc');
        el.onblur = function() { calcnrc('nrc','nrcresult'); };
        el.class = 'nrc'
        el.id = 'nrc';
        el.size = 4;
        cellRight3.appendChild(el);

        var cellRight4 = row.insertCell(5);
        var el = document.createElement('input');
        el.setAttribute('class', 'mrc');
        el.onblur = function() { calcmrc('mrc','mrcresult'); };
        el.type = 'text';
        el.name = 'mrc' + iteration;
        el.id = 'mrc';
        el.size = 4;
        cellRight4.appendChild(el);
    }

    function removeRowFromTable() {
        var tbl = document.getElementById('tblBlock').tBodies[0];
        var lastRow = tbl.rows.length;
        if (lastRow > 1) tbl.deleteRow(lastRow - 1);
        calcnrc();
        calcmrc();
        productcalc();
    }
</script>

<script type="text/javascript">

    function calcnrc() {
        var inputs = document.getElementsByClassName('nrc');
        var sum = 0;
        for(var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            var num = Number(input.value);
            if(isNaN(num)) {
                alert('Please enter a valud number: ' + input.value);
                num = 0;
            }
            sum += num;
        }
        document.getElementById('nrcresult').value = '$' + sum;
    }

</script>

<script type="text/javascript">
    function calcmrc() {
        var inputs = document.getElementsByClassName('mrc');
        var sum = 0;
        for(var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            var num = Number(input.value);
            if(isNaN(num)) {
                alert('Please Enter a valid number: ' + input.value);
                num = 0;
            }
            sum += num;
        }
        document.getElementById('mrcresult').value = '$' + sum;
    }
</script>

<script type="text/javascript">
    function productcalc() {
        var tbl = document.getElementById('tblBlock').tBodies[0];
        var rows = tbl.children;
        var total = document.getElementById('mrcresult');
        var zTotal = 0;
        for(var rowIdx = 0; rowIdx < rows.length; rowIdx++) {
            var row = rows[rowIdx];
            var inputX = row.getElementsByClassName('price')[0];
            var inputY = row.getElementsByClassName('qt')[0];
            var inputZ = row.getElementsByClassName('mrc')[0];
            var x = Number(inputX.value);
            var y = Number(inputY.value);
            var z = x * y;
            inputZ.value = z;
            zTotal += z;
        }
        total.value = '$' + zTotal;
    }
</script>


<div align="center">
    <p>
        <input type="button" class="formbutton" value="Add" onclick="addRowToTable();" />
        <input type="button" class="formbutton" value="Remove" onclick="removeRowFromTable();" />
    </p>
    <p>
    </p>
    <table width="75%" border="1" id="tblBlock">
        <thead>
            <tr>
                <td>Service Description</td>
                <td>Term</td>
                <td>Price</td>
                <td>QT</td>
                <td>NRC</td>
                <td>MRC</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" name="service_description"id="txtRow1" size='55' /></td>
                <td><input type="text" name="term" class="term" value="36 Month" id="txtRow1" size='4' /></td>
                <td><input type="text" name="price" class="price" id="txtRow1" onBlur="productcalc()" size='4' /></td>
                <td><input type="text" name="qt" class="qt" id="txtRow1" size='4' onBlur="productcalc()" /></td>
                <td><input type="text" name="nrc" class="nrc" onBlur="calcnrc('nrc','nrcresult')" id="nrc" size='4' /></td>
                <td><input type="text" name="mrc" class="mrc" onBlur="calcmrc('nrc','mrcresult')" id="mrc" size='4' /></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><input type="text" name="nrcresult" id="nrcresult" /></td>
                <td><input type="text" name="mrcresult" id="mrcresult" /></td>
            </tr>
        </tfoot>
    </table>
    <br><br>
</div>
于 2012-06-11T19:03:44.600 に答える