Javascript。onach class getval

Question

謝謝你看這個問題。

我有一個問題，因爲我有幾個文本字段

它們的ID作爲跟隨

行1：

height_1,weight_1,cost_1 

行31：

height_31,weight_31,cost_31 

行61：

height_61,weight_61,cost_61 

總計將有90行..所以，在過去的問題是

它的工作，因爲我會用下面的JavaScript來計算總的這90行。

for(i=1;i<=90;i++) 
{ 

$('.height').each(function() { 
heightTotal += Number($(this).val());  
}) 

$("#height_row_A").html(heightTotal); 

$('.weight').each(function() { 
weightTotal += Number($(this).val());  
}) 

$("#weight_row_A").html(weightTotal); 

//cost is just about the same so I leave it out 
} 

所以，現在的問題是，在過去的90行計算在一起，並追加到這個跨度ID height_row_total和weight_row_total

但現在我需要計算第1行至30，列31至60，行61至90

各有各行上跨度在其行的頂部

跟隨這樣

行1

height_row_A,weight_row_A 

行2

height_row_B,weight_row_B 

行3

height_row_C,weight_row_C 

如何改變我的這個

$('.height').each(function() { 
heightTotal += Number($(this).val());  
}) 

$('.weight').each(function() { 
weightTotal += Number($(this).val());  
}) 

只得到第1行至30，而不是每個值與編號高度 然後得到行31到60和61到90

我的代碼段就像這個字段的例子。 1將變更爲2在下一行，則共有30排3列

<tr><td>1</td> 

<td><input class="height" type="text" maxlength="6" style="width: 40px; FONT-WEIGHT: bold; FONT-SIZE: 13px;" name="height_1" id="height_1" tabindex="1" value=""></td> 

<td><input class="weight" type="text" maxlength="6" style="width: 40px; FONT-WEIGHT: bold; FONT-SIZE: 13px;" name="weight_1" id="weight_1" tabindex="2" value=""></td> 


For Row 2 
    <tr><td>2</td> 

    <td><input class="height" type="text" maxlength="6" style="width: 40px; FONT-WEIGHT: bold; FONT-SIZE: 13px;" name="height_2" id="height_2" tabindex="3" value=""></td> 

    <td><input class="weight" type="text" maxlength="6" style="width: 40px; FONT-WEIGHT: bold; FONT-SIZE: 13px;" name="weight_2" id="weight_2" tabindex="4" value=""></td> 

我想要做的是取1行的總高度 - 30跨度ID，並顯示「total_height_for_col_1 「與同爲重

然後行31-60將成爲COL_2和61-90將成爲col_3

我JsFiddle，爲的jsfiddle例如，我得到了4盒。

用JavaScript，我想能夠計算框1和框2的總和，然後框3和框4。

這個例子只用了4箱，在現實中我得到了90個箱，並通過30分割每跨度ID

Answer 1

你最好使用更強大的東西像lodash。

這將允許您輕鬆操作數組（請記住$('xxx')返回一個數組）。

要獲取範圍，請使用slice。

要獲得每個元素作爲數字使用_.map()

的值來計算的總和使用_.reduce

事情是這樣的：

_.reduce( 
    _.map($('.height').slice(0,30), function(x){ return Number($(x).val());}), 
    function(accumulator, val) { return accumulator + val; }) 

（顯然你需要30,60切和60,90獲得其他結果）。

說明：

• $('.height')返回HTML元素的數組
• _.map應用回調函數的每個元素，以得到其數值
• _.reduce使用回調來更新每個元素的累加器（如沒有爲累加器指定初始值，第一個值將用於初始化，以及以下值更新它）

如果你想使用普通的JavaScript：

var ac=0; 
var $elements = $('.height'); 
for(var i=0; i<30; i++) { 
    ac = ac + Number($($elements[i]).val()); 
}; 

Answer 2

見http://jsfiddle.net/rsddffx1/4/

如果您的HTML相匹配的小提琴，與他們多行單獨的表格，第一行第一列是索引它應該工作。如果你的html不同，它需要改變。我對html進行了一些更改，以更改span類名稱並將類添加到表中。因爲每個表都有其自己的總和範圍，所以不需要保持30和60之間或者大於60的其他值。

我在表格上做了一個表格，得到表格索引，每行從第一列獲取索引值，添加匹配的高度和重量，然後根據我們檢查的表更新跨度。它看起來是這樣的：

$("#button").on("click", function(){ 

    $(".table").each(function (tableIndex, table){ 
     var height = 0; 
     var weight = 0; 

     $(this).find("tr").each (function (rowIndex, row){ 

      var firstColumnValue = $(row).find("td").first().text(); 

      height += parseFloat($("#height_" + (firstColumnValue)).val()); 
      weight += parseFloat($("#weight_" + (firstColumnValue)).val()); 

     }); 

     $("#total_" + (tableIndex + 1)).text(height + " " + weight); 
    }); 
}); 

如果每個表格第一行第一列沒有在生產HTML索引，我可以改變的功能從父表中獲取行索引，而不是讀它。