javascript - 动态表总和

大家早上好。
我遇到了一个问题，我是javascript和jquery的新手，我不得不使用一个动态表来存储jewerly，添加行、删除行和乘以项目数量的价格。我已经可以用质量乘以价格，但我不能得到所有商品的总数。这是我的代码：

 function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name="chkbox[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    cell2.innerHTML = "<input type='text' id='codigo[]' name='codigo[]'>";

     var cell3 = row.insertCell(2);
    cell3.innerHTML = "<input type='text' name='descripcion[]'>";

     var cell4 = row.insertCell(3);
    cell4.innerHTML =  "<input type='text' step='any' class='cantidad' style='height='50px' width='40px'' id='cantidad' min='1' onchange='calculate(this);' value='0' name='cantidad[]' oninput='calculate()' />";

    var cell5 = row.insertCell(4);
    cell5.innerHTML = "<input type='text' step='any' min='0' value='0' class='precio' id='precio' name='precio[]' onchange='calculate(this);' />";

     var cell6 = row.insertCell(5);
    cell6.innerHTML = "<input type='text' id='total' value='0' class='total' name='total[]' />";

    }

function deleteRow(tableID) {
    try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
    }catch(e) {
        alert(e);
    }
}

这是价格乘以数量

   function calculate(x)
 {

var myRow = x.parentNode.parentNode
myRow.cells[5].innerHTML = parseFloat(myRow.cells[4].getElementsByTagName('INPUT')[0].value)*parseFloat(myRow.cells[3].getElementsByTagName('INPUT')[0].value);
}

这是我的html

<INPUT type="button" value="Agregar Producto" onClick="addRow('dataTable')" />

<INPUT type="button" value="Borrar Producto" onClick="deleteRow('dataTable')" />

<form id="myform" action="<?php echo $_SERVER['PHP_SELF']  ?>" method="post">

<TABLE width="425" border="1">
<thead>
<tr>
<th width="98"></th>
<th width="94">CODIGO</th>
<th width="94">DESCRIPCION</th>
<th width="84">CANTIDAD</th>
<th width="121">PRECIO</th>
<th width="121">TOTAL</th>
</tr>
</thead>
<tbody id="dataTable">

</tbody>
</TABLE>

所以，我的问题是，有没有办法得到这个剧本的总数？我尝试了许多脚本，并适应了我的代码，但它们似乎都不起作用。我不知道我做错了什么。我希望你能帮助我。提前谢谢。

最佳答案

这里有一个可行的解决方案
我修改了功能，现在似乎对我有用了。

$(document).ready(function() {
  //this is added just to pre-populate some rows
  addRow2('dataTable');
  addRow2('dataTable');
  addRow2('dataTable');
  addRow2('dataTable');



  $(".chkall").click(function() {
    if ($(".chkall").is(':checked')) {
      $("#dataTable input[type=checkbox]").each(function() {
        $(this).prop("checked", true);
      });

    } else {
      $("#dataTable input[type=checkbox]").each(function() {
        $(this).prop("checked", false);
      });
    }
  });


  $('.get_total, .g_total').click(function(e) {
    g_total = 0;
    $('input.total').each(function() {
      g_total += eval($(this).val());
    });
    console.log(g_total);
    $('.g_total').html(g_total);
  })
  $('input.total').on('change', function() {
    g_total = 0;
    $('input.total').each(function() {
      g_total += eval($(this).val());
      $('.g_total').html(g_total);
    })
  })
})

function grandTotal(){
  g_total = 0;
    $('input.total').each(function() {
      g_total += eval($(this).val());
      $('.g_total').html(g_total);
    })
}


function addRow2(tableid) {
  var table = $('#' + tableid);
  rowCount = table.children().length;
  //console.log(table.children().length);
  newrow = '<tr class="dataRow"><td><input type="checkbox" name="chkbox[]" class="remove"></td><td><input type="text" name="codigo[]"></td><td><input type="text" name="descripcion[]"></td><td><input type="text" step="any" class="cantidad" min="1" onchange="calc2($(this))" name="cantidad[]"></td><td><input type="text" step="any" min="0" value="0" class="precio" name="precio[]" onchange="calc2($(this));"></td><td><input type="text"  value="0" class="total" name="total[]"></td></tr>';
  table.append(newrow);
}



function calc2(_row) {
  row = _row.closest('.dataRow');
  //console.log();
  //
  qty = row.find('.cantidad').val();
  price = row.find('.precio').val();
  total = parseFloat(qty) * parseFloat(price);
  console.log( 'qty:'+ qty +' * price:'+price + ' = '+total);
  row.closest('.dataRow').find('.total').val(total);
  grandTotal();
}



function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  } catch (e) {
    alert(e);
  }
}

.g_total {
  width: 100px;
  background-color: #ccc;
  height: 20px;
  display: inline-block;
  float: right;
}
.cantidad,
.precio,
.total {
  /*
  height: 50px;
  width: 40px;*/
  text-align: center;
}
.cantidad {
  width: 84px;
}
.codigo,
.descripcion {
  width: 54px
}
.precio,
.total {
  width: 121px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<INPUT type="button" value="Agregar Producto" onClick="addRow2('dataTable')" />

<INPUT type="button" value="Borrar Producto" onClick="deleteRow('dataTable')" />
<input type="button" class="get_total" value="Get Total" /><span class="g_total"></span>
<form id="myform" action="<?php echo $_SERVER['PHP_SELF']  ?>" method="post">



  <TABLE border="1">
    <thead>
      <tr>
        <th>
          <input type="checkbox" class="chkall">
        </th>
        <th class="codigo">CODIGO</th>
        <th class="descripcion">DESCRIPCION</th>
        <th class="cantidad">CANTIDAD</th>
        <th class="precio">PRECIO</th>
        <th class='total'>TOTAL</th>
      </tr>
    </thead>
    <tbody id="dataTable">

    </tbody>
  </TABLE>