尝试使用javascript获取动态添加行的水平积

我正在尝试使用“添加”和“删除”按钮将动态添加的行的两个输入字段相乘。我有一个单独的javascript工作，它将所有产品相加，并在底部对它们进行汇总

在下面的示例中，我已经可以得到底部所有z字段的总和，但是在如何获得每行x和y的乘积方面存在问题。我正在使用的javascript的总和获取类“z”的所有内容，并将它们相加

下面是我用于sum的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;

---

这应该给你一个想法：

<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>

用户1202589的编辑

<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>

没有什么变化，我想这可能是你想要的，或者至少是在正确的方向上

---

我想我说得太快了。它适用于标准html的第一行，但不适用于动态添加的行。我正在对输入使用“onblur”事件来触发脚本。我添加了用于在上面的代码块中添加行的脚本，我从这个网站上得到了代码calcmrc是我用来计算底部总数的另一个脚本，它正在运行我想问题是我在一个分区下向一个表中添加了行你想使用一个表还是只使用一个分区？有没有办法让我看到这个页面，缺少函数测试有点困难。我使用一个表格，很抱歉弄乱了，我把所有的代码都放在一个txt文件中如果有帮助的话，谢谢，

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>