sum td value in table with jquery

Question

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

Could you please elaborate more what exactly you want ? What do you mean by third value of each row ? — SpiderCode
– SpiderCode, Commented Nov 22, 2018 at 6:21
I want to get together with each time you click on the Add Row button to add values that are in the third row sum, the price, and then they are spilled elsewhere. — Arman Bagheri
– Arman Bagheri, Commented Nov 22, 2018 at 6:24
I want to have a total of the td item price. The question is clear. — Arman Bagheri
– Arman Bagheri, Commented Nov 22, 2018 at 6:29

Shashidhara · Accepted Answer · 2018-11-22 09:34:38Z

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>

Everything is fine, but can it be removed if it is clicked on the delete button and that amount is removed from the total?

Jitendra G2 · Accepted Answer · 2018-11-22 06:51:35Z

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>

marc_s · Accepted Answer · 2018-12-01 09:54:02Z

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>

Collectives™ on Stack Overflow

sum td value in table with jquery

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related