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

これを試して

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