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”结果，当您单击“删除”按钮时，它也应该更新总计。

更新：我认为问题在于脚本正在寻找最后一个表格单元格，然后转到前一个表格单元格以获取值。当平均单元格是倒数第二个单元格时，这曾经有效，但不是倒数第三个单元格，我不知道如何按名称/ID 等查找该单元格。有什么想法吗？

我是 Javascript 的新手，花了将近一天的时间来解决这个问题，所以非常感谢一些帮助。

4

2 回答 2

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 类（可能有多个）。这两种方法也都很有效。

希望这可以帮助！

于 2013-05-14T03:55:36.687 回答
1

Working jsFiddle Demo

你有 2td在你想要的之后input。所以你必须调用prev方法两次：

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 回答