CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Harish Karthick
Harish Karthick

Reputation: 720

Auto Table Calculation

I have table with quantity cell when change quantity it need to multiply with other parent td value.and sum the column values . (i.e) if i change quantity to 2 then the parent rows need multiply by 2 & columns get value get added

I done all the calculation part without input in td now i added input and the calculation got affected i debug and checked it i don't know what would be the problem

Here my fiddle:
https://jsfiddle.net/hahkarthick/57zpk59k/3/

$(document).ready(function(){
  $('.quantity').on('change, keyup',function(){
       var val=$(this).val();
			 console.log(val)
     // To avoid auto inc while pressing arrow keys
         var preVal =$(this).data('val');

      $(this).data('val',val);
     //To avoid auto inc while pressing arrow keys //
 if(val =='' ||  isNaN(val) || val < 1 || val == undefined){
    val = 1;
 }

      $(this).siblings().each(function(){  
          var tbvalue=$(this).data("val");
           var result= parseInt(tbvalue)*parseInt(val);
          $(this).text(result);
      });
autoSum();
  });

autoSum();
});
function autoSum(){
      for (var i = 1; i <= 4; i++) {
        var sum = 0;
        var tdBoxes = $('.auto_sum>tbody>tr>td>input:nth-child(' + i + ')');
        for(var j=0; j<tdBoxes.length-1;j++)
        {
          var value = $(tdBoxes[j]).val();          
          sum += (value == undefined || value == "")? 0 : parseInt(value);
        }
        // set total in last cell of the column
        $('.auto_sum>tbody>tr>td>input:nth-child(' + i + ')').last().html(sum);
       // $('.auto_sum>tbody>tr>td:nth-child(' + i + ')').last().toggleClass('total');
      }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Table calculation</h2>
  <p>Calculaton</p>            
  <table class="auto_sum table table-hover">
    <thead>
      <tr>
        <th>value1</th>
        <th>value2</th>
        <th>value3</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="number" data-val="" value="20" name=""></td>
        <td><input type="number" data-val="" value="10" name=""></td>
        <td><input type="number" data-val="" value="10" name=""></td>
        <td><input class="quantity" type="number" name=""></td>
      </tr>
      <tr>
        <td><input type="number" data-val="" value="5" name=""></td>
        <td><input type="number" data-val="" value="6" name=""></td>
        <td><input type="number" data-val="" value="12" name=""></td>
        <td><input class="quantity" type="number" name=""></td>
      </tr>
      <tr>
        <td><input type="number" data-val="" value="45" name=""></td>
        <td><input type="number" data-val="" value="23" name=""></td>
        <td><input type="number" data-val="" value="22" name=""></td>
        <td><input class="quantity" type="number" name=""></td>
      </tr>
        <tr class="total">
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
    </tbody>
  </table>
</div>

Upvotes: 0

Views: 91

Answers (2)

T.Shah
T.Shah

Reputation: 2768

Hope this helps...

    <div class="container">
      <h2>Table calculation</h2>
      <p>Calculaton</p>            
      <table class="auto_sum table table-hover" id="sum_table">
        <thead>
            <tr class="title">
            <th>value1</th>
            <th>value2</th>
            <th>value3</th>
            <th>Quantity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="text" data-val="" value="20[2]" name=""></td>
            <td><input type="number" data-val="" value="10" name=""></td>
            <td><input type="number" data-val="" value="10" name=""></td>
            <td><input class="quantity" type="number" name=""></td>
          </tr>
          <tr>
            <td><input type="number" data-val="" value="5" name=""></td>
            <td><input type="number" data-val="" value="6" name=""></td>
            <td><input type="number" data-val="" value="12" name=""></td>
            <td><input class="quantity" type="number" name=""></td>
          </tr>
          <tr>
            <td><input type="number" data-val="" value="45" name=""></td>
            <td><input type="number" data-val="" value="23" name=""></td>
            <td><input type="number" data-val="" value="22" name=""></td>
            <td><input class="quantity" type="number" name=""></td>
          </tr>
            <tr  class="totalColumn">
              <td class="totalCol">Total:</td>
              <td class="totalCol">Total:</td>
              <td class="totalCol">Total:</td>
              <td></td>
            </tr>
        </tbody>
      </table>
    </div>  
    <script>
    $(document).ready(function(){
      $('.quantity').on('change',function(){
           var val=$(this).val();
           console.log(val)
         // To avoid auto inc while pressing arrow keys
           var preVal =$(this).data('val');

          $(this).data('val',val);
         //To avoid auto inc while pressing arrow keys //
     if(val =='' ||  isNaN(val) || val < 1 || val == undefined){
        val = 1;
     }


    $(this).parent().siblings().each(function(){  
        var oldval = $(this).find('input').val();

        var arr = oldval.split("[");
        console.log(arr);
        //var newval = val * oldval;
        var newval = (val * parseFloat(arr[0])).toFixed(2);

        console.log(newval);
        if(arr.length > 1) {
            newval = newval + "[" + arr[1];
        }

        $(this).find('input').val(newval);
    });
   autoSum();
      });

    autoSum();
    });

    function autoSum(){

        var $dataRows=$("#sum_table tr:not('.total, .title')");
        var totals=[0,0,0];
        $dataRows.each(function() {
            $(this).find('input').each(function(i){        
                totals[i]+=parseFloat( $(this).val());
            });
        });
        $("#sum_table td.totalCol").each(function(i){  
            $(this).html("total:"+totals[i]);
        });

    }

    </script>

Upvotes: 1

Lalit
Lalit

Reputation: 1369

I have updated the fiddle.

I have made following changes :-

  1. $('.quantity').on('change, keyup',function(){ changed to $('.quantity').on('keyup',function(){
  2. $(this).siblings().each(function(){ changed to $(this).parent().siblings().each(function(){
  3. var tbvalue=$(this).data("val"); changed to var tbvalue=$(this).find("input[type=number]").val();

Hope it helps.

Upvotes: 0

Related Questions