Reputation: 43

sum td value in table with jquery

I have a table in my program, which adds the values to that row How can I add the third value of each row?

$(".add-row").click(function() {
  var packageid = $('#pack').find(':selected').attr('data-id');
  var itemid = $('#itemname').find(':selected').attr('item-id');
  var itemname = $("#itemname").val();
  var item_price = $("#item_price").val();
  var packs = $("#pack").val();
  var markup = "<tr><td data-id=" + packageid + ">" + packs + "<td item-id=" + itemid + ">" + itemname + "</td><td class='price'>" + item_price + "</td><td><button class='btn btn-danger' id='del'>Delete</button></td></tr>";
  $("table tbody").append(markup);
});

$("table").on("click", "#del", function() {
  $("table tbody").find('tr td').each(function() {
    $("table").on("click", "#del", function() {
      $(this).parents("tr").remove();
    })
  });
});

$('.add-row').click(function() {

  var ids = [];
  $('.table tbody tr').each(function() {
    ids.push({
      packageid: $(this).find('td:nth-child(1)').attr('data-id'),
      itemid: $(this).find('td:nth-child(2)').attr('item-id'),
      item_price: $(this).find('td:nth-child(3)').html(),
    });

  });
  $('#demo').val(JSON.stringify(ids));
});

<form>
  <div class="col-md-3">
    <select class="form-control" id="pack" required>

      <option data-id="1" value="test">test</option>

    </select>
  </div>
  <div class="col-md-3">
    <select class="form-control" id="itemname">

      <option item-id="1" value="test">example</option>

    </select>
  </div>
  <div class="col-md-3">
    <input type="number" class="form-control" id="item_price" placeholder="Price">
  </div>
  <div class="col-md-3">
    <button type="button" class="add-row btn btn-success cusb btn-anim"><i class="fas fa-plus"></i><span class="btn-text">Add Item</span></button>
  </div>
</form>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Package Name</th>
      <th>Item Name</th>
      <th>Item Price</th>
      <th>Delete</th>
    </tr>
  </thead>

  <tbody>

  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

I want to add items within the item's price and show it somewhere for example a div tag or span tag. In this example, the third child of each scroll row should be added together and sum them together

Upvotes: 1

Answers (3)

Bhargav Aboti

Reputation: 278

You can create a div with totalprice and then please add some jQuery code as mentioned below.

var totalprice = item_price;
var currentprice = $("#totalprice").text();
totalprice  = (parseInt(currentprice)  + parseInt(item_price)) ;
$("#totalprice").html(totalprice);

Add it in add button.

 
 $(".add-row").click(function () {
            var packageid = $('#pack').find(':selected').attr('data-id');
            var itemid = $('#itemname').find(':selected').attr('item-id');
            var itemname = $("#itemname").val();
            var item_price = $("#item_price").val();
            var packs = $("#pack").val();
            var markup = "<tr><td data-id=" + packageid + ">" + packs + "<td item-id=" + itemid + ">" + itemname + "</td><td class='price'>" + item_price + "</td><td><button class='btn btn-danger' id='del'>Delete</button></td></tr>";
            $("table tbody").append(markup);

var totalprice = item_price;
var currentprice = $("#totalprice").text();
totalprice  = (parseInt(currentprice)  + parseInt(item_price)) ;
$("#totalprice").html(totalprice); 

        });

        $("table").on("click", "#del", function () {
            $("table tbody").find('tr td').each(function () {
                $("table").on("click", "#del", function () {
                    $(this).parents("tr").remove();
                })
            });
        });

        $('.add-row').click(function () {

            

            var ids = [];
            $('.table tbody tr').each(function () {
                ids.push({
                    packageid: $(this).find('td:nth-child(1)').attr('data-id'),
                    itemid: $(this).find('td:nth-child(2)').attr('item-id'),
                    item_price: $(this).find('td:nth-child(3)').html(),
                });

            });
            $('#demo').val(JSON.stringify(ids));
        });

<form>
                <div class="col-md-3">
                    <select class="form-control" id="pack" required>
                      
                            <option data-id="1" value="test">test</option>
                       
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-control" id="itemname">
                        
                            <option item-id="1" value="test">example</option>
                     
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control" id="item_price" placeholder="Price">
                </div>
                <div class="col-md-3">
                    <button type="button" class="add-row btn btn-success cusb btn-anim"><i class="fas fa-plus"></i><span class="btn-text">Add Item</span></button>
                </div>

                <div class="col-md-3">
                    <b>Total Price is : </b><span id = "totalprice">0</span>
                </div>
            </form>

            <table class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>Package Name</th>
                    <th>Item Name</th>
                    <th>Item Price</th>
                    <th>Delete</th>
                </tr>
                </thead>

                <tbody>

                </tbody>
            </table>
            
             <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Upvotes: 0

Shashidhara

Reputation: 683

Updated code by writing 'sum' logic in separate function.

function calculateSum() {
    //Calculate sum of price
    var sum = 0;
    $('.table tbody tr').each(function() {
        var item_price = parseInt($(this).find('td:nth-child(3)').html());
        //Check for NaN & add.
        sum += item_price?item_price:0;
    });

    //Display to div
    $("#total").text(sum);
}

$(".add-row").click(function() {
    var packageid = $('#pack').find(':selected').attr('data-id');
    var itemid = $('#itemname').find(':selected').attr('item-id');
    var itemname = $("#itemname").val();
    var item_price = $("#item_price").val();
    var packs = $("#pack").val();
    var markup = "<tr><td data-id=" + packageid + ">" + packs + "<td item-id=" + itemid + ">" + itemname + "</td><td class='price'>" + item_price + "</td><td><button class='btn btn-danger' id='del'>Delete</button></td></tr>";
    $("table tbody").append(markup);
});

$("table").on("click", "#del", function() {
    $("table tbody").find('tr td').each(function() {
        $("table").on("click", "#del", function() {
            $(this).parents("tr").remove();
            calculateSum(); //Perform sum after removing row.
        })
    });
});

$('.add-row').click(function() {
    var ids = [];
    $('.table tbody tr').each(function() {
        ids.push({
            packageid: $(this).find('td:nth-child(1)').attr('data-id'),
            itemid: $(this).find('td:nth-child(2)').attr('item-id'),
            item_price: $(this).find('td:nth-child(3)').html(),
        });

    });

    calculateSum(); //Perform sum after adding row.

    $('#demo').val(JSON.stringify(ids));
});

<form>
   <div class="col-md-3">
      <select class="form-control" id="pack" required>
         <option data-id="1" value="test">test</option>
      </select>
   </div>
   <div class="col-md-3">
      <select class="form-control" id="itemname">
         <option item-id="1" value="test">example</option>
      </select>
   </div>
   <div class="col-md-3">
      <input type="number" class="form-control" id="item_price" placeholder="Price">
   </div>
   <div class="col-md-3">
      <button type="button" class="add-row btn btn-success cusb btn-anim"><i class="fas fa-plus"></i><span class="btn-text">Add Item</span></button>
   </div>
</form>
<table class="table table-striped table-bordered">
   <thead>
      <tr>
         <th>Package Name</th>
         <th>Item Name</th>
         <th>Item Price</th>
         <th>Delete</th>
      </tr>
   </thead>
   <tbody>
   </tbody>
</table>
<div id="total"></div>
<script
   src="https://code.jquery.com/jquery-3.3.1.min.js"
   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
   crossorigin="anonymous"></script>

Upvotes: 4

Jitendra G2

Reputation: 1206

below code help you to add logic for sum.

$(document).ready(function() {
  var totle = 0;
  $(".add-row").click(function() {

    var packageid = $('#pack').find(':selected').attr('data-id');
    var itemid = $('#itemname').find(':selected').attr('item-id');
    var itemname = $("#itemname").val();
    var item_price = $("#item_price").val();
    var packs = $("#pack").val();
    var markup = "<tr><td data-id=" + packageid + ">" + packs + "<td item-id=" + itemid + ">" + itemname + "</td><td class='price'>" + item_price + "</td><td><button class='btn btn-danger' id='del'>Delete</button></td></tr>";
    $("table tbody").append(markup);

    totle += parseInt(item_price);
  });

  $("table").on("click", "#del", function() {
    $("table tbody").find('tr td').each(function() {
      $("table").on("click", "#del", function() {
        $(this).parents("tr").remove();
      })
    });
  });

  $('.add-row').click(function() {

    var ids = [];
    $('.table tbody tr').each(function() {
      ids.push({
        packageid: $(this).find('td:nth-child(1)').attr('data-id'),
        itemid: $(this).find('td:nth-child(2)').attr('item-id'),
        item_price: $(this).find('td:nth-child(3)').html(),
      });
    });
    $('#demo').val(JSON.stringify(ids));
    alert("Totle price is : " + totle);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
  <select class="form-control" id="pack" required>

    <option data-id="1" value="test">test</option>

  </select>
</div>
<div class="col-md-3">
  <select class="form-control" id="itemname">

    <option item-id="1" value="test">example</option>

  </select>
</div>
<div class="col-md-3">
  <input type="number" class="form-control" id="item_price" placeholder="Price">
</div>
<div class="col-md-3">
  <button type="button" class="add-row btn btn-success cusb btn-anim"><i class="fas fa-plus"></i><span class="btn-text">Add Item</span></button>
</div>
</form>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Package Name</th>
      <th>Item Name</th>
      <th>Item Price</th>
      <th>Delete</th>
    </tr>
  </thead>

  <tbody>

  </tbody>
</table>

Upvotes: 0

sum td value in table with jquery

Answers (3)

Related Questions