Как автоматично да сумирате полета за входни стойности в HTML таблица, които споделят същото име?

Имам HTML таблица с колони от полета за въвеждане и бих искал сумата от стойностите в полетата да се показва автоматично (т.е. без щракване върху бутон за сума и актуализации, когато стойностите в полетата се променят). Броят на редовете в таблицата варира, тъй като се създава динамично чрез скоростта. По-долу има примерна HTML таблица, искам да се покаже сумата от стойностите в реда за капацитет. Не съм много сигурен откъде да започна, опитах многобройни JavaScript кодове и не можах да накарам нищо да работи правилно.

 <table border = "1" id = "table">
  <TR>
        <TH>Resource</TH> 
        <TH>Vacation</TH>
        <TH>Allocation</TH>
        <TH>Holidays</TH> 
        <TH>Capacity</TH>
        <TH>Remainder</TH>
    </TR>

  #foreach($user in $userList)
  <tr>
  <td>$user.resource</td>

        <td><input type=text name="vacation" size="6" maxlength="10"></td>
        <td><input type=text name="alloc" size="6" maxlength="10"></td>
        <td><input type=text name="holidays" size="6" maxlength="10"></td>
        <td><input type=text name="capacity" size="6" maxlength="10"></td>
        <td><input type=text name="remainder" size="6" maxlength="10"></td>
    </tr>
  #end 
  <tr>
  <td>Total:</td>
  <td></td><td></td><td></td>
  <td class= "capsum"><input type="text" name="captotal" size="6" maxlength="10"></td>
  <td><input type="text" name="remtotal" size="6" maxlength="10"></td>

  </tr>

  </table>

В таблицата ще има няколко реда и всяко поле за въвеждане в колоната за капацитет споделя едно и също име. Така сумата от колоната Капацитет трябва да се показва в полето за въвеждане "capsum" и трябва да се изчислява автоматично и да се актуализира, когато стойностите в полетата за въвеждане се променят.


javascript html jquery velocity
person mbecker73    schedule 18.07.2012    source източник
comment
Погледнете използването на .each за преминаване през редовете. След това можете да извлечете всяко число и да го добавите към променлива.   -  person Blazemonger    schedule 18.07.2012

Отговори (4)


arrow_upward
1
arrow_downward

Нещо като това:

$('table#table input[name=capacity]').change(function()
{
 var sum = 0;

 $('table#table input[name=capacity]').each(function()
 {
  sum += parseInt($(this).val());
 });

 $('input[name=captotal]').val(sum);
});

http://jsfiddle.net/H7DSX/10/

person Paul Fleming    schedule 18.07.2012
comment
Вие правите предположението, че той използва jQuery или би знаел да използва jQuery. Трябва малко да подплатите този отговор. - person Mike Fulton; 18.07.2012
comment
@MikeFulton Въпросът е маркиран с jQuery. - person Paul Fleming; 18.07.2012
comment
О, така е. Съжалявам, пропуснах това. - person Mike Fulton; 18.07.2012
comment
Имам jQuery, но наистина не знам как да го използвам - person mbecker73; 18.07.2012

arrow_upward
0
arrow_downward

Закачете се за change събитие, най-добре на ниво на таблица. След това сумирайте всички стойности:

var updatefns = {};
jQuery.each(["vacation", "alloc" ,"holidays", "capacity", "remainder"], function(i, name) {
     // cache all the elements
     var head = $("#table tr:first th:nth-child("+i+")"); // kind of selector
     var inputs = $("#table input[name=\""+name+"\"]");
     updatefns[name] = function() {
         var sum = 0;
         inputs.each(function(){
             sum+=parseInt(this.value) || 0;
         });
         // set new text:
         head.text(name.charAt(0).toUppercase+name.substr(1)+": "+sum);
     };
});
$("#table").change(function(e){
     var t, n;
     if ((t = e.target) && (n = t.name) && n in updatefns)
         updatefns[n]();
});

Може да използвате по-добър селектор за главните клетки, които трябва да се актуализират, може би да им дадете съответен атрибут, за да ги изберете. И разбира се, вие сте свободни да промените начина, по който е зададен новият текст.

person Bergi    schedule 18.07.2012

arrow_upward
-1
arrow_downward

Трябва да зададете функция, която да бъде обработена за onChange JavaScript събитието за полетата на формуляра, които трябва да бъдат сумирани.

След това тази функция просто ще прочете стойностите на всяко от полетата, ще изчисли сумата и след това ще я съхрани обратно, където трябва да отиде.

person Mike Fulton    schedule 18.07.2012
comment
можете ли да разгледате по-подробно как да направите това? - person mbecker73; 18.07.2012

arrow_upward
-1
arrow_downward

Ако имате jQuery опитайте:

<table onchange="reloadSum()"></table>

var reloadSum = function() {
    var sums = $('.toBeSummed'); // this will need to be the class of the things you want to sum
    var sum = 0;
    for (var i = 0; i < sums.length; i++) {
        sum += parseFloat(sums[i].value);// or maybe parseFloat(sums[i].innerHTML)
    }
    $('#capsum').text(sum);
}

Ако нямате jQuery, вземете jQuery и след това направете това.

person user1466729    schedule 18.07.2012