c# - 使用 jQuery 计算表列值

Question

我有一些表格，我需要计算列值。在我的场景中，我需要计算总商品价格 99 + 55 = 154 到小计行。在这里，我的小计计算不起作用。

我的代码(我的表创建的一部分)

  $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);

            });




        })

Answer 1

您可以更改此设置:

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

<小时/>

Short demo

<小时/>

简短说明:

.live() 现已从最新的 jQuery 版本中删除，因此如果您使用 1.7+ 版本，则可以将代码移至 .on () 方法来委托(delegate)事件。事件委托(delegate)的语法如下:

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

$(static_parent) 是相对 dom 准备就绪时可用的元素，并且在页面中附加任何动态 dom 元素之前它当时可用。

所以在你的情况下:

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