# Sum Of Rows In Jquery

## 11 May 2018 - 1 answer

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 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.

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/