使用Javascript更新表格总数

我最近在使用jQuery的表格中添加了一些功能，以允许用户在运行中很好地添加/删除表格行。然而，在这样做的时候，我打破了基于值的自动计算总计进入表行中的一些单元格，对于我的生活，我无法弄清楚我是如何破坏它，也没有如何解决它。使用Javascript更新表格总数

我也注意到删除表格行并不会更新总数（这是我添加的新功能）。

这里的运行计算的每周平均小时数为单行脚本 - 它也应该在表的底部，同时更新总中等或高场：

$(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，显示当前功能 - 你可以看到，如果产生平均值但输入数据时生成总计一“男”因此，当你点击删除按钮也应该过更新汇总。

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

我是JavaScript新手，花了将近一天的时间尝试解决这个问题，所以非常感谢这方面的帮助。

来源

2013-05-13 user982124

这在这里是什么破： '$（ '＃lastYear TR：有（。风险）'）。等式（1）.find（'TD：最后'）.prev（）。find（'input'）.val（）' 它正在返回 '“添加另一个活动”' – Ryan 2013-05-13 19:05:53

感谢@ryan，因为我已经为新的删除添加了另一列按钮，以便保存，我想总的平均柱不再那么它抓住了“添加其他活动按钮”的值的一个最后一个单元格之前，但现在2中的最后一个单元格之前。你知道指向前一个单元格的语法吗？ – user982124 2013-05-13 22:45:31

Working jsFiddle Demo

您2 td所需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-14 03:57:50

谢谢 - 我没有意识到你可以多次调用prev方法。现在运作良好。你不知道如何删除按钮也更新汇总（即当按下删除按钮强制重新计算和行消失）？ – user982124 2013-05-15 06:08:23

马克存储与例如CSS类的平均水平，比用它来找到行内的单元格（而不是依赖于TD：最后一个）你的细胞。

如：

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-14 03:55:36

谢谢 - 我同意。我继承了这一点，所以目前我需要使用我已有的东西，但重写肯定会使用CSS类。非常感谢 – user982124 2013-05-15 06:09:28

使用Javascript更新表格总数

回答

相关问题