Вычисление значений столбцов таблицы с помощью jQuery

66
5

У меня есть таблица и мне нужно вычислить значения столбца. В моем сценарии мне нужно рассчитать общую цену товара 99 + 55 = 154 до общей суммы строк. В этом моем подсчете SubTotal не работает.

enter image description here

Мой код (часть моего создания таблицы)

  $option.each(function () {
if ($(this).prop('selected')) {
var txtId = 'txtQty' + i;
var lblId = 'lblQty' + i;
var row = $('<tr><td>' + $(this).text() + '</td><td>' + $(this).attr('RetailPrice') + '</td><td>' + $(this).attr('WholesalePrice') + '</td><td>' + '<input type="text" id="' + txtId + '">' + '</td><td> <button type="button" class="btn btn-warning btn-xs btncalc">Calculate</button></td><td class="tot"><label for="tempprice" id="' + lblId + '"></label></td><td><img id="imgdel" src="../../Images/delete.png" alt="" onclick="deleteclick(this)" title="Delete" /></td></tr>');

table.append(row);
i++;
}

});
var row2 = $('<tr><td>' + "SubTotal" + '</td><td></td><td></td><td></td><td></td></tr>');
table.append(row2);
$('#product-load-tbl').append(table);
});

Расчетная часть

    $('.btncalc').live('click', function () {
debugger;
var row = $(this).parents("tr:first");
var rowval = $(row).find("td:eq(1)").html();
var inpval = $(row).find("td:eq(3) input").val();

if (inpval != null || inpval != 0) {
var result = (rowval * inpval);
}
else {
var result = 0;
}
$(row).find("td:eq(5)").html(result);

var lstrow = $(this).parents("tr:last"); // this sub total calculation not working
$.each($('.tot'), function (element) {

$(lastrow).find("td:eq(5)").html(element);

});

})

спросил(а) 2020-04-04T00:44:48+03:00 3 месяца назад
1
Решение
55

Вы можете изменить это:

$.each($('.tot'), function (element) {
$(lastrow).find("td:eq(5)").html(element);
});

к этому:

var total = 0; // intialise a var with value 0
$('.tot').each(function (i, element) { // loop the selected item in each row
total += +$(this).text(); // cast the string to integer and add it to total
});
$(lastrow).find("td:eq(5)").text(total); // then at last place the total

Короткая демонстрация

И для короткой заметки:

.live() теперь удаляется из последних версий jQuery, поэтому, если вы используете version 1.7+ вы можете переместить свой код в .on() для делегирования события. Синтаксис подобен этому для делегирования событий:

$(static_parent).on(event, selector, callback);

$(static_parent) - это элемент, который был доступен, когда относительный dom готов, и он был доступен в то время, прежде чем добавлять любой динамический элемент dom на странице.

поэтому в вашем случае:

$('table_ID/Class').on('click', '.btncalc', function(){
//...all the stuff with .live goes here
});

ответил(а) 2020-04-04T01:04:31.331960+03:00 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема