Как автоматически суммировать поля входных значений в таблице 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

Вам необходимо назначить функцию для обработки события JavaScript onChange для полей формы, которые необходимо суммировать.

Затем эта функция просто считывала значения каждого из полей, вычисляла сумму, а затем сохраняла ее туда, куда нужно.

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