Javascript - 删除也重新计算总计的表行

Question

我有一个表格，允许用户进行一些选择并输入一些数字，然后这些数字将用于自动计算总计。我最近添加了一些功能来向表中添加额外的行，还允许用户在需要时删除行。

我需要删除按钮同时强制重新计算总计，而目前它只是删除行并保留现在不正确的原始总计。

这是我删除表格行的脚本:

$(window).load(function(){
//Sum Table Cell and Map

 $('#lastYear')
    .on('change', 'select', calc)
    .on('keyup', 'input', calc);

function calc(){

    $('#lastYear tr:has(.risk)').each(function(i,v){

        var $cel = $(v.cells);

        var $risk = $cel.eq(1).find('option:selected').val();
        var $numb = $cel.eq(2).find('input').val();
        var $weeks = $cel.eq(3).find('input').val();
        var $avg = ($numb * $weeks) / 52;
        var $avgRounded = Math.round( $avg * 10 ) / 10;

        $cel.eq(4).find('input').val($avgRounded);

    });   

    var tot = {high:0,moderate:0}; 

    $('#lastYear tr:has(.risk) option:selected')
                .map(function(i){
                    var el = $(this).val();
                    var qty = parseFloat(
$('#lastYear tr:has(.risk)').eq(i).find('td:last')
    .prev().prev() // call prev method twice
    .find('input').val()
);

                    if (!tot.hasOwnProperty(el)) {
                        tot[el] = 0;            
                    }
                    tot[el] += qty
                    return tot;
                }).get();

    // console.log(tot);
     $('#textfield4').val(tot.moderate.toFixed(1));
    $('#textfield5').val(tot.high.toFixed(1));

    }
});//]]>  

这是执行计算的脚本:

$('#lastYear').on('click', '.delbtn', function () {
    $(this).closest('tr').remove()
});

var newIDSuffix = 2;
$('#lastYear').on('click', '.addbtn', function () {
    var thisRow = $(this).closest('tr')[0];
    $(thisRow).find('.delbtn').show();

    var cloned = $(thisRow).clone();
    cloned.find('input, select').each(function () {
        var id = $(this).attr('id');
        id = id.substring(0, id.length - 1) + newIDSuffix;
        $(this).attr('id', id);
    });

    cloned.insertAfter(thisRow).find('input:text').val('');
    cloned.find('.delbtn').hide();
    cloned.find("[id^=lastYearSelect]")
    .autocomplete({
        source: availableTags,
        select: function (e, ui) {

            $(e.target).val(ui.item.value);
            setDropDown.call($(e.target));
        }
    }).change(setDropDown);

    $(this).remove();
    newIDSuffix++;
});

我已经设置了一个工作 jsFiddle这可能有助于解释发生了什么。

我是 Javascript 的新手，但对我来说，我似乎需要以某种方式将删除函数与计算函数结合起来？

Answer 1

您只需在 .delbtn 点击处理程序中调用 calc()。 calc 函数和删除按钮单击处理程序目前处于不同的上下文中......但如果它们在同一范围内(将它们移到同一文件和相同的 onload block )，你会没事的。

我已经更新了您的 JSFiddle 以演示 http://jsfiddle.net/6KPxq/2/