2

最近、jQueryを使用してテーブルにいくつかの機能を追加し、ユーザーがその場でテーブル行を追加/削除できるようにしました。これはうまく機能しています。しかし、そうすることで、表の行のいくつかのセルに入力された値に基づく合計の自動計算を壊してしまいました。

また、テーブルの行を削除しても合計が更新されないことにも気付きました (これは私が追加した新機能です)。

以下は、単一行の週あたりの平均時間数を計算する実行スクリプトです。同時に、テーブルの下部にある合計中または高フィールドも更新する必要があります。

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

}

});//]]>

現在の機能を示すjsFiddleをセットアップしました。データを入力するときに平均を生成するが、合計の「NaN」結果を生成するかどうかを確認できます。[削除] ボタンをクリックすると、合計も更新されます。

更新: 問題は、スクリプトが最後のテーブル セルを探してから、前のセルに移動して値を取得することだと思います。これは、平均セルが最後の 2 番目のセルであったときに機能していましたが、最後の 3 番目のセルではなく、名前/ID などでそのセルを探す方法がわかりません。何かアイデアはありますか?

私はJavascriptを初めて使用し、これを解決するためにほぼ1日を費やしました。これについての支援に本当に感謝しています。

4

2 に答える 2

1

(td:last に依存するのではなく) 行内のセルを見つけるためにそれを使用するよりも、CSS クラスなどで平均を格納するセルをマークします。

例えば：

var row = $('#lastYear tr:has(.risk)').eq(i);  // if this is the TR you want..
var avgCell = row.find('td.averageCell');      // find a <TD class="averageCell">.
var avgValue = parseFloat( avgCell.val());

一般に、物事を見つけるために位置に依存することは脆弱であり、維持するのがかなり困難です。ID (1 つしかない場合) または CSS クラス (複数ある場合もあります) を使用することをお勧めします。これらはどちらも効率的です。

お役に立てれば！

于 2013-05-14T03:55:36.687 に答える
1

Working jsFiddle Demo

tdご希望の の後に2 ありますinput。prevしたがって、メソッドを 2 回呼び出す必要があります。

var qty = parseFloat(
    $('#lastYear tr:has(.risk)').eq(i).find('td:last')
        .prev().prev() // call prev method twice
        .find('input').val()
);
于 2013-05-14T03:57:50.533 に答える