Question

我最近使用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”结果，当您点击“删除”按钮时，它也应该也更新总数。

更新：我认为问题是脚本正在查找最后一个表格单元格然后转到上一个表格单元格以获取值。当平均单元格是第二个最后一个单元格时，这曾经工作，但不是它是第三个最后一个单元格，我不知道如何通过名称/ ID等来查找该单元格。任何想法？

我是Javascript的新手，并且花了将近一天时间尝试解决这个问题，所以非常感谢您对此有所帮助。

Answer 1

标记存储平均值的单元格，例如CSS类，而不是使用它来查找行内的单元格（而不是依赖于td：last）。

例如：

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（只有一个）或CSS类（可能有多个。）这两个都是有效的。

希望这有帮助！

Answer 2

Working jsFiddle Demo

在您想要的td之后，您有2 input。因此，您必须两次调用prev方法：

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

使用Javascript更新表总计

2 个答案: