Сумма строк в Jquery

Question

Сейчас я делаю выборку значений по их идентификатору в J Query, и все работает нормально. Но для этого мне нужно назначить каждому элементу управления разные идентификаторы (дубликат идентификатора не дает результата во второй строке).

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>

То, что я пробовал раньше, это изменить идентификатор на @class на моей странице RAZOR 'ClassName' без числового идентификатора (например, id = Qty и id = qty1 изменены на @ 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()));
});

Пожалуйста, ведите меня.

Answer 1

Я так и сделал.

$("#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);
});

Answer 2

Базовая концепция суммы строк похожа на это, используйте свою логику и реализуйте

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>

Обновление:

$('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/