thanks for looking at this question.
I have a issue as I got few text field
Their id is as followed
Row 1:
height_1,weight_1,cost_1
Row 31:
height_31,weight_31,cost_31
Row 61:
height_61,weight_61,cost_61
Total will have 90 rows.. so the problem in the past is
Its work because I will use the javascript below to calculate the total of this 90 rows.
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
}
So the problem now is, in the past the 90 rows are calculated together and append to this span id height_row_total and weight_row_total
But now I need to calculate row 1 to 30, row 31 to 60 , row 61 to 90
Each have their on row span at the top of their row
which followed like this
Row 1
height_row_A,weight_row_A
Row 2
height_row_B,weight_row_B
Row 3
height_row_C,weight_row_C
How do I change my this
$('.height').each(function () {
heightTotal += Number($(this).val());
})
$('.weight').each(function () {
weightTotal += Number($(this).val());
})
to only get row 1 to 30, instead of every value with the id height and then to get row 31 to 60 and 61 to 90
My code segment is something like this example of a field. the 1 will change to 2 on the next row, there is total 30 rows x 3 column
<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>
What I wanna to do is fetch the total height for row 1 - 30 , and display in a span id "total_height_for_col_1" and the same for weight
Then row 31-60 will be for col_2 and 61-90 will be for col_3
My JsFiddle , for the JsFiddle example, I got 4 boxes.
With the javascript, I wanted to able calculate the total for box 1 and 2, then box 3 and 4.
This example used only 4 boxes, in reality I got 90 boxes, and split by 30 per span id
You'd better use something more powerful like lodash.
This will allow you to easyly manipulate the arrays (remember that $('xxx') returns an array).
To get the ranges, use slice.
To get the value of each element as number use _.map()
To calculate the sum use _.reduce
Something like this:
_.reduce(
_.map( $('.height').slice(0,30), function(x){ return Number($(x).val());}),
function(accumulator, val) { return accumulator + val; })
(Obviously you need to slice by 30,60 and 60,90 to get the other results).
Explanation:
$('.height') returns an array of HTML elements_.map applies the callback function to each element to get its value_.reduce uses the callback to update the accumulator for each element (As there is no initial value specified for the accumulator, the first value will be use to initialize, and the following values to update it)If you want to use plain javascript:
var ac=0;
var $elements = $('.height');
for(var i=0; i<30; i++) {
ac = ac + Number($($elements[i]).val());
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다