We have answer of your question!

100% solved queries, no empty question

Question: Total sum of dynamic table


Good morning, everyone.

I have a problem, I new to javascript and jquery, and I have to use a dynamic table for a jewerly store, adding rows, delete rows, and multiplying the price for the quantity of the items. I already can multiply quality by price, but I can't get the grand total of all items. This is my code:

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

    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) {
    }catch(e) {

This is for multiplying price by quantity

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

And this is my 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">
<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>
<tbody id="dataTable">


So, my question is, is there a way to obtain the grand total of this script? I tried many scripts, and adapted to my code, but non of them seem to work. I don't know what I'm doing wrong. I hope you can help me. Thanks in advance.

Question author Rafael-hernandez | Source



Here is one possible down and dirty solution I modified the functions and it seems to work for me now.

$(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>
Answer author Happymacarts

Tickanswer.com is providing the only single recommended solution of the question Total sum of dynamic table under the categories i.e javascript , php , jquery , mysql , . Our team of experts filter the best solution for you.

Related Search Queries:

sum of dynamic columns in sql server , javascript sum table column , html table sum column , sum of dynamic columns in pivot table in sql server ,

You may also add your answer

Thanks for contributing an answer to Tick Answer!