CODEWITHSUNDEEP
javascriptjquery
JayB
JayB

Reputation: 77

Using a for loop and function to calculate row total on a table

I think this should be simple but just can't get it right...I am trying to get row total on a table that has incrementing ids like:

<table id="myTable" class="form">

  <thead>
    <tr>
    ....  
    </tr>
  </thead>

  <tbody>
   <tr class="">
    <td>
      <input type="number" name="quantity" id="item-0-quantity">
    </td>

    <td>
       <input type="number" name="unit_price"id="item-0-unit_price">
    </td>

    <td>

    <td>
      <input type="number" name="quantity" id="item-1-quantity">
    </td>

    <td>
       <input type="number" name="unit_price"id="item-1-unit_price">
    </td>

    ...etc                     
    <td>                        
  </tr>
  </tbody>
</table>

I initially used the method below for each row's total calculation and it worked, but it's not efficient.

for first row: $('#item-0-quantity, #item-0-unit-price').on('input',function(e){
               $('#Total').val(parseFloat($('#item-0-quantity').val()) * parseFloat($('#item-0- 
                unit-price').val()));

for second row: $('#item-1-quantity, #item-1-unit-price').on('input',function(e){
            $('#Total').val(parseFloat($('#item-1-quantity').val()) * parseFloat($('#item-1- 
             unit-price').val()));

...and so on.

I thought i would better to use a For Loop to iterate and update the value of i based on a rowCounter like: 

  var rowCounter = $("#myTable tr").length - 1;

    for (var i = 0; i <= rowCounter; i++) {

    $('#item-'+i+'-quantity, #item-'+i+'-unit-price').on('input',function(e){
        $('#Total').val(parseFloat($('#item-'+i+'-quantity').val()) * parseFloat($('#item-'+i+'-unit-price').val()));

    });
    }

When i input values(quantity and unit-price), i don't get the total.The For Loop doesn't work. Please help,thanks.

Upvotes: 3

Views: 1166

Answers (3)

angel.bonev
angel.bonev

Reputation: 2232

Try this:

 //loop by name
$("input[name=quantity], input[name=unit_price]").on('input', function () {
    var total = 0;
    $("input[name=quantity]").each(function (i, e) {
        total += $(this).val() * $(e).closest("tr").find("input[name=unit_price]").val();
    });
    $('#Total').val(total);
});

//loop by table
$("#myTable input[type=number]").on('input', function () {
    var total = 0;
    $("#myTable tr").each(function (i, e) {
        if (document.getElementById("item-" + i + "-quantity") && document.getElementById("item-" + i + "-unit_price")) {//just check if elements exists
            total += $(e).find("#item-" + i + "-quantity").val() * $(e).find("#item-" + i + "-unit_price").val();
        }
    });
    $('#Total_by_table_rows').val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="form">
    <tbody>
        <tr class="">
            <td>
                <input type="number"  name="quantity" id="item-0-quantity">
            </td>

            <td>
                <input type="number"  name="unit_price"id="item-0-unit_price">
            </td>

        </tr>
        <tr>
            <td>
                <input type="number"  name="quantity" id="item-1-quantity">
            </td>

            <td>
                <input type="number"  name="unit_price"id="item-1-unit_price">
            </td>

        </tr>
    </tbody>
</table>
<label> Total:
    <input id="Total">
</label>
<label> Total by table rows:
    <input id="Total_by_table_rows">
</label>

Upvotes: 5

David
David

Reputation: 7295

Because the content you want to sum is identified with the "quantity" and "unit_price" name attributes, you can use this:

$('tr').each(function() {
  sum += $('input[name="quantity"]', this).val() * $('input[name="unit_price"]', this).val();
})

The second parameter in the selector (this in our case) give jQuery a context for the search, i.e., each of the rows of the table.

Here you have the snippet:

$('#calculate').click(function() {
  var sum = 0;
  $('tr').each(function() {
    sum += $('input[name="quantity"]', this).val() * $('input[name="unit_price"]', this).val();
  })
  $('#result').text(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="myTable" class="form">
  <tbody>
    <tr>
      <td>
        <input type="number" name="quantity" value="0">
      </td>
      <td>
        <input type="number" name="unit_price" value="0">
      </td>
    </tr>
    <tr>
      <td>
        <input type="number" name="quantity" value="0">
      </td>
      <td>
        <input type="number" name="unit_price" value="0">
      </td>
    </tr>
  </tbody>
</table>

<input type="button" value="Calculate" id="calculate">
<div>
  Result: <span id="result"></span>
</div>

Upvotes: 1

Nirav Joshi
Nirav Joshi

Reputation: 2960

Here you can do like this.

Your code is not working becuase of 

var rowCounter = $("#myTable tr").length - 1;
for (var i = 0; i <= rowCounter; i++) {
    $('#item-'+i+'-quantity, #item-'+i+'-unit-price').on('input',function(e){
       $('#Total').val(parseFloat($('#item-'+i+'-quantity').val()) * parseFloat($('#item-'+i+'-unit-price').val()));
    });
}

For Loop was executes before your type in input fields. And also you have some mistake in code too like here you wrote $('#item-'+i+'-unit-price') but it should be like this $('#item-'+i+'-unit_price')

var quantity = $("input[name='quantity']");
$("input[name='quantity'], input[name='unit_price']").on('input',function(){
var total = 0;
    $(quantity).each(function(){
       total += parseFloat($(this).val()) * parseFloat($(this).parent().next().find("input[name='unit_price']").val());
    });
    $("#Total span").html(total);
});
td {
width: 80%;
float: left;
margin-left: 10px;
}
label {
 width: 20%;
 float: left
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="form">
  <tbody>
   <tr class="">
    <td>
      <label>Quantity 1</label>
      <input type="number" name="quantity" id="item-0-quantity" />
    </td>
    <td>
      <label>Unit Price 1</label>
      <input type="number" name="unit_price"id="item-0-unit_price" />
    </td>
    <td>
      <label>Quantity 1</label>
      <input type="number" name="quantity" id="item-1-quantity" />
    </td>
    <td>
      <label>Unit Price 1</label>
      <input type="number" name="unit_price"id="item-1-unit_price" />
    </td> 
    
    <td id="Total">
    <label>Total</label>
    <span></span>
    </td>
  </tr>
  </tbody>
</table>

Upvotes: 0

Related Questions