CODEWITHSUNDEEP
jqueryhtml-table
Trung Tran
Trung Tran

Reputation: 13741

How to iterate through table and sum values jquery

Can someone help me with how to iterate through my table and summing the value of quantity * price for each row? Here's my table:

<table id="template_item_table" class="table table-striped">
            <thead>
                <tr>
                    <th>Product Code</th>
                    <th>Unit Price ($)</th>
                    <th>Quantity</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12345</td>
                    <td>50</td>
                    <td><input type="text" class="form-control quantity" name="quantity"></td>
                    <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td>
                    <td><button class="btn btn-danger">Remove Item</button></td>
                </tr>
                <tr>
                    <td>2222</td>
                    <td>53</td>
                    <td><input type="text" class="form-control quantity" name="quantity"></td>
                    <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td>
                    <td><button class="btn btn-danger">Remove Item</button></td>
                </tr>
            </tbody>
        </table>

I've gotten as far as:

$("#template_item_table tr").each(function() {

        });

But I'm not sure how to proceed...

Upvotes: 0

Views: 2219

Answers (4)

devangana
devangana

Reputation: 46

Try this

<script>
jQuery(document).ready(function($) 
{                       
$('.form-control.quantity').change(function(){
ComputeTotal();
});

function ComputeTotal()
{
var i=0;
$("#template_item_table tr").each(function() {

i=i+1;
if(i>1){
var quantity1=$(this).find("td input:text").val();
var price1=$(this).find('td').eq(1).text();

sum = sum + (eval(price1) * eval(quantity1));
}
});
alert(sum);
}
</script>

Upvotes: 0

Jobelle
Jobelle

Reputation: 2834

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
    function solve() {
        var iPrice = 0;
        var iQuantity = 0;
        var sum = 0;
        $('#template_item_table tbody tr').each(function () {
            iPrice      = parseInt($(this).find('td:eq(1)').text(), 10);
            iQuantity = parseInt($(this).find('td:eq(2)').find('.quantity').val(), 10);
            sum = sum + (iPrice * iQuantity);
        });
        $('#sum').text("Sum=" + sum)
    }
    $('#solveButton').click(function () {
        solve();
    });
});
</script>
</head>

<body style="width:50%;">
    <input type="button" value="Get Sum" id="solveButton" />
  <div id="sum" style="color:red;font-weight:bold;"></div>
    <table id="template_item_table" class="table table-striped">
            <thead>
                <tr>
                    <th>Product Code</th>
                    <th>Unit Price ($)</th>
                    <th>Quantity</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12345</td>
                    <td>50</td>
                    <td><input type="text" class="form-control quantity" name="quantity"></td>
                    <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td>
                    <td><button class="btn btn-danger">Remove Item</button></td>
                </tr>
                <tr>
                    <td>2222</td>
                    <td>53</td>
                    <td><input type="text" class="form-control quantity" name="quantity"></td>
                    <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td>
                    <td><button class="btn btn-danger">Remove Item</button></td>
                </tr>
            </tbody>
        </table>
</body>
</html>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

Not sure where you expect to put these values but you need to find the 2 input values using find() and multiply them together

$("#template_item_table tr").each(function() {
   var price = +$(this).find('td').eq(1).text() || 0,
       qty = +$(this).find('.quantity').val() || 0,
       rowTotal = qty*price;
});

If you wanted them appended to each row can add to above

$(this).append('<td>' + rowTotal +'</td>')

If you are looking only for a grand total

var total = 0;
$("#template_item_table tr").each(function() {
   var price = +$(this).find('td').eq(1).text()|| 0,
       qty = +$(this).find('.quantity').val() || 0,
       total += qty*price;
});
alert(total);

Upvotes: 0

Matt
Matt

Reputation: 5428

You need to select the 2nd td and multiply by the value of the input in the third td:

$("#template_item_table tbody tr").each(function() {
   var value = $(this).find(" td:nth-child(2)").html();
   console.log(value);

  var quantity = $(this).find(" td:nth-child(3) input").html();
  console.log(quantity);

  var total = value * quantity;
  console.log(total);
});

You'd probably want to wrap it all in an on change binding for the input fields so it only runs when they change.

Upvotes: 1

Related Questions