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

试试这个

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

Answer 2

您只需在calc()点击处理程序中调用.delbtn即可。 calc函数和删除按钮单击处理程序目前处于不同的上下文中......但如果它们位于相同的范围内（将它们移动到同一文件和同一onload块中），那么''好的。

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

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

2 个答案: