使用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更新表格總數

回答

相關問題