用jQuery将表中的td值相加

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

Answer 1

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> 

Answer 2

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> 

Answer 3

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>