CODEWITHSUNDEEP
javascriptjqueryhtml
Richard Bustos
Richard Bustos

Reputation: 2998

Creating a sum of values in a table using javascript

Looking to replace all the "?" in the table below with the expected values.

Should I just add classes to the <th> that has a value in them and add them? 

<table id="repair-invoice">
    <tr>
        <th>Item</th>
        <th>Parts</th>
        <th>Labor</th>
        <th>Total</th>
    </tr>
    <tr>
        <td>Automatic Transmission Replacement</td>
        <td>$1,809.99</td>
        <td>$830.00</td>
        <td>?</td>
    </tr>
    <tr>
        <td>Exhaust system replace</td>
        <td>$279.99</td>
        <td>$225.00</td>
        <td>?</td>
    </tr>
    <tr>
        <td>Replace air filter</td>
        <td>$9.99</td>
        <td>$0.00</td>
        <td>?</td>
    </tr>
    <tr>
        <td colspan="3">Total</td>
        <td>?</td>
    </tr>
</table>

Upvotes: 3

Views: 120

Answers (2)

Bal Krishna Jha
Bal Krishna Jha

Reputation: 11

In case you want to follow D.R.Y :

    function removeDollar(num) {
        return num.substring(1, num.length);
    }
    function parseCurrency(num) {
        return parseFloat(removeDollar(num).replace(/,/g, ''));
    }
    function addNumbers(num1, num2) {
        return parseFloat(num1) + parseFloat(num2);
    }


    $(document).ready(function () {
        var parts = [];
        var labor = [];
        for (var i = 0; i < 3; i++) {
            parts[i] = $("#repair-invoice > tbody > tr:nth-child("+(2+i)+") > td:nth-child(2)").text();
            labor[i] = $("#repair-invoice > tbody > tr:nth-child("+(2+i)+") > td:nth-child(3)").text();
            $("#repair-invoice > tbody > tr:nth-child(" + (2 + i) + ") > td:nth-child(4)").html('$'+addNumbers(parseCurrency(parts[i]) , parseCurrency(labor[i])));
        }

        var Total = 0;
        for (var i = 0; i <3; i++) {
            var rowTotal = parseCurrency($("#repair-invoice > tbody > tr:nth-child(" + (2 + i) + ") > td:nth-child(4)").text());
            Total = addNumbers(Total, rowTotal);
        }
        $("#repair-invoice > tbody > tr:nth-child(5) > td:nth-child(2)").html('$' + Total.toFixed(2));

    });

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can iterate over the row/column combination and sum of the values like

var sum = 0;
$('#repair-invoice tr').slice(1, -1).each(function() {
  var $tr = $(this),
    total = 0;
  $tr.find('td').slice(1, -1).each(function() {
    total += +$(this).text().replace(/\$|,/g, '') || 0;
  });
  $tr.find('td:last-child').text(total);
  sum += total;
});
$('#repair-invoice tr:last-child td:last-child').text(sum.toFixed(2)); //will have to format and display the value
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="repair-invoice">
  <tr>
    <th>Item</th>
    <th>Parts</th>
    <th>Labor</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>Automatic Transmission Replacement</td>
    <td>$1,809.99</td>
    <td>$830.00</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Exhaust system replace</td>
    <td>$279.99</td>
    <td>$225.00</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Replace air filter</td>
    <td>$9.99</td>
    <td>$0.00</td>
    <td>?</td>
  </tr>
  <tr>
    <td colspan="3">Total</td>
    <td>?</td>
  </tr>
</table>

Upvotes: 1

Related Questions