1

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

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

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

$(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 新手，但对我来说，我似乎需要以某种方式将删除函数与计算函数结合起来？

4

2 回答 2

1

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

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

于 2013-05-15T06:35:41.447 回答
1

尝试这个

$('#lastYear').on('click', '.delbtn', function () {
    $(this).closest('tr').remove();
    calc();
});
于 2013-05-15T06:25:02.097 回答