CODEWITHSUNDEEP
javascriptjqueryrazor
Sam
Sam

Reputation: 110

Sum of Rows in Jquery

What I'm doing right now is to fetch values by their id in J Query and it is working fine. But to do this I have to assign every control different id's (Duplicate Id does not give result on second row) .

JS

$('#Qty,#Price,#Disc').on('input', function () {
    var val1 = Number($('#Qty').val());
    var val2 = Number($('#Price').val());
    var val3 = isNaN(Number($('#Disc').val())) ? 0 : Number($('#Disc').val());
    var total = isNaN(val1 * val2) ? 0 : (val1 * val2);

    $('#TotalAmount').val(total - (total * (val3 / 100)));
    $('#NetAmt').val($('#TotalAmount').val());
 });

$('#Qty1,#Price1,#Disc1').on('input', function () {
    var val1 = Number($('#Qty1').val());
    var val2 = Number($('#Price1').val());
    var val3 = isNaN(Number($('#Disc1').val())) ? 0 : Number($('#Disc1').val());
    var total = isNaN(val1 * val2) ? 0 : (val1 * val2);

    $('#TotalAmount1').val(total - (total * (val3 / 100)));
    $('#NetAmt').val(Number($('#TotalAmount').val()) + Number($('#TotalAmount1').val()));
});

RAZOR

    <div style="padding:10px" class="row">

        <div class="left">
            @Html.EditorFor(model => model.a, new { htmlAttributes = new { Type = "Text", placeholder = "ProductName" } })
        </div>
        <div class="left">
            @Html.EditorFor(model => model.b, new { htmlAttributes = new { id = "Qty", Type = "Text", placeholder = "Qty" } })
        </div>
        <div class="left">
            @Html.EditorFor(model => model.c, new { htmlAttributes = new { id = "Price", Type = "Text", placeholder = "Price" } })
        </div>
        <div class="left">
            @Html.EditorFor(model => model.d, new { htmlAttributes = new { id = "Disc", Type = "Text", placeholder = "Discount" } })
        </div>
        <div class="left">
            @Html.EditorFor(model => model.e, new { htmlAttributes = new { id = "TotalAmount", Type = "Text", placeholder = "Total Amount" } })
        </div>
        <div class="left">
            @Html.EditorFor(model => model.f, new { htmlAttributes = new { Type = "Text", placeholder = "Remarks" } })
        </div>
    </div>
    <div style="padding:10px" class="row">

        <div class="left">
            @Html.EditorFor(model => model.a, new { htmlAttributes = new { Type = "Text", placeholder = "ProductName" } })
        </div>
        <div class="left">
            @Html.EditorFor(model => model.b, new { htmlAttributes = new { id = "Qty1", Type = "Text", placeholder = "Qty" } })
        </div>
        <div class="left">
            @Html.EditorFor(model => model.c, new { htmlAttributes = new { id = "Price1", Type = "Text", placeholder = "Price" } })
        </div>
        <div class="left">
            @Html.EditorFor(model => model.d, new { htmlAttributes = new { id = "Disc1", Type = "Text", placeholder = "Discount" } })
        </div>
        <div class="left">
            @Html.EditorFor(model => model.e, new { htmlAttributes = new { id = "TotalAmount1", Type = "Text", placeholder = "Total Amount" } })
        </div>
        <div class="left">
            @Html.EditorFor(model => model.f, new { htmlAttributes = new { Type = "Text", placeholder = "Remarks" } })
        </div>
    </div>

What I've tried before is to change id to @class on my RAZOR Page 'ClassName' without numeric identifier (Example id = Qty and id = qty1 changed to @class=Qty).

JS 

$('.row').each(function(){
    $('.Qty,.Price,.Disc').on('input', function () {
        var val1 = Number($('.Qty').val());
        var val2 = Number($('.Price').val());
        var val3 = isNaN(Number($('.Disc').val())) ? 0 : Number($('.Disc').val());
        var total = isNaN(val1 * val2) ? 0 : (val1 * val2);
    });
    $('.TotalAmount1').val(total - (total * (val3 / 100)));
    $('.NetAmt').val(Number($('.TotalAmount').val()));
});

Kindly guide me.

ScreenShot

Upvotes: 0

Views: 50

Answers (2)

Sam
Sam

Reputation: 110

I've Done this way.

$("#ProData").on("keyup", ".Qty,.Disc,.Price,.Cell", function (e) {
    e.preventDefault();
    var Qty = Number($(this).parent().find('.Qty').val());
    var Price = Number($(this).parent().find('.Price').val());
    var Disc = Number($(this).parent().find('.Disc').val());
    var TWDisc = isNaN(Qty * Price) ? 0 : (Qty * Price);
    var Total = (TWDisc - (TWDisc * (Disc / 100)))

    $(this).parent().find('.TotalAmount').val(Total);
    var sum = 0;
    $(".TotalAmount").each(function () {
        sum += +$(this).val();
    });
    $("#NetAmt").val(sum);
});

Upvotes: 0

Kakul Sarma
Kakul Sarma

Reputation: 303

Basic Concept of Sum of row is like this , use your logic and implement 

sum =0;
$('.row').each(function(e){
  sum +=parseInt($($('.row')[e]).html());
})

console.log(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="order_table">
<tr>
  <th>NAME</th>
  <th>value</th>
 <tr>
 <tr>
  <td>John</td>
  <td class='row'>123</td>
 <tr>
 <tr>
  <td>Harry</td>
  <td class='row'>23</td>
 <tr>
</table>

Update : 

$('tr').each(function () {
        var sum = 0
          $(this).find('.row').each(function () {
            var row = $(this).text();
            sum += parseFloat(row);
            console.log(sum);
        });

 $('.result', this).val(sum);
})

https://jsfiddle.net/bo4g76ra/4/

Upvotes: 1

Related Questions