每个类getval上的Javascript

Javascript on .each class getval

本文关键字：上的 Javascript getval      更新时间：2023-09-26

感谢您关注这个问题。

我有一个问题，因为我有几个文本字段

他们的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行是一起计算的，并附加到这个span idheight_row_total和weight_row_tetal

但现在我需要计算第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行，而不是id为height的每个值然后得到行31到60和61到90

我的代码段类似于这个字段示例。下一行的1将变为2，共有30行x3列

<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行的总高度，并在span id"total_height_for_col_1"中显示，重量也是如此

第31-60行将用于col_2，第61-90行将用于col_3

我的JsFiddle，对于JsFidle的例子，我得到了4个盒子。

使用javascript，我希望能够计算框1和框2的总数，然后计算框3和框4的总数。

这个例子只使用了4个盒子，实际上我得到了90个盒子，并按每个跨度30个id

分割

你最好使用更强大的东西，比如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());
};

请参阅http://jsfiddle.net/rsddffx1/4/

如果你的html匹配fiddle，那么它应该有效，用多行分隔表，第一行第一列是索引。如果您的html不同，则需要对其进行更改。我对html做了一些更改，以更改span类名并将类添加到表中。无需计数<30，否则在30和60之间，或者大于60，因为每个表都有自己的和的跨度。

我在表上做了一个each，获取表索引。每行从第一列获取索引值，添加匹配的高度和权重，然后根据我们检查的表更新跨度。它看起来像这样：

$("#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中没有索引，我可以更改函数以从父表中获取行索引，而不是读取它。

相关文章：