Jquery: сумма ввода текстовых полей - PullRequest
Новая
       9

Jquery: сумма ввода текстовых полей

1 голос
/ 17 апреля 2011

У меня есть таблица, включающая поля ввода текста с базовой структурой ниже.У меня возникают проблемы при создании функции для итерации всех строк в таблице и суммирования всех значений полей ввода, начинающихся с BFObel, где значения полей, начинающихся с BFOkto, совпадают.Таким образом, для базового примера ниже сумма для значения 1111 будет 2000, а сумма для значения 1112 будет 3000. Каждая сумма будет затем записана в поле ввода с идентификатором field1111, field1112 и т.д ... 

<table>
  <tr id="BFOrow1">
    <td><input type="text" id="BFOtxt1" value="text"/></td>
    <td><input type="text" id="BFOkto1" value="1111" /></td>
    <td><input type="text" id="BFObel1" value="1000" /></td>
  </tr>
  <tr id="BFOrow2">
    <td><input type="text" id="BFOtxt2" value="text"/></td>
    <td><input type="text" id="BFOkto2" value="1111" /></td>
    <td><input type="text" id="BFObel2" value="1000" /></td>
  </tr>  
  <tr id="BFOrow3">
    <td><input type="text" id="BFOtxt3" value="text"/></td>
    <td><input type="text" id="BFOkto3" value="1112" /></td>
    <td><input type="text" id="BFObel3" value="1000" /></td>
  </tr>  
  <tr id="BFOrow4">
    <td><input type="text" id="BFOtxt4" value="text"/></td>
    <td><input type="text" id="BFOkto4" value="1112" /></td>
    <td><input type="text" id="BFObel4" value="1000" /></td>
  </tr>  
  <tr id="BFOrow5">
    <td><input type="text" id="BFOtxt5" value="text"/></td>
    <td><input type="text" id="BFOkto5" value="1112" /></td>
    <td><input type="text" id="BFObel5" value="1000" /></td>
  </tr>  
</table>

Ответы [ 3 ]

2 голосов
/ 17 апреля 2011

Вы захотите использовать литерал объекта для отслеживания ваших результатов, и атрибут "начинается с" селектора , чтобы найти текстовые входные данные: 

var accumulator = { };
$('table input[id^=BFOkto]').each(function() {
    var sum_id = this.id.replace(/^BFOkto/, 'BFObel');
    if(!accumulator[this.value])
        accumulator[this.value] = 0;
    accumulator[this.value] += parseInt($('#' + sum_id).val(), 10);
});
// accumulator now has your results.

Не забудьте второй аргумент parseInt(), чтобы вы не запутались в значениях с ведущими нулями (которые выглядят как восьмеричные без указанного осциллографа).

Например: http://jsfiddle.net/ambiguous/QAqsQ/ (вам нужно запустить это в браузере с открытой консолью JavaScript, чтобы увидеть получившийся accumulator).

0 голосов
/ 18 апреля 2011

Другой подход: найти все поля ввода с префиксом BFOkto, для каждого найти вход с префиксом BFObel, разделяющим одного и того же родителя, и накапливать его значение 

ref = $("table td input[id^=BFOkto]");

var sums = new Object();
ref.each(function(){
    val = parseInt($(this).closest('tr').find("td input[id^=BFObel]").val(), 10);
    property = 'i'+ this.value;
    sums[property] = (sums[property] || 0 ) + val;
});

alert(sums['i1111']);
alert(sums['i1112']);

суммы будут объектом со свойствами 

i1111 = 2000
i1112 = 3000

Несмотря на то, что javascript позволяет это, лучше не использовать чисто числовые свойства для объектов (ассоциативных массивов), поэтому префикс i

Рабочий пример здесь: http://jsfiddle.net/TbSau/1/

0 голосов
/ 17 апреля 2011 
var sum1111 = 0;

$('input[value="1111"]').each(function() {
  var ordinal = $(this).attr('id').replace('BFOkto', '');
  sum1111 += parseInt($('#BFObel' + ordinal).val());
});

В конце sum1111 должен равняться 2000.

Для повторного использования оберните логику в функцию: 

function getSum(BFOkto) {
    var sum = 0;
    var ordinal = null;

    $('input[value="' + BFOkto + '"]').each(function() {
      ordinal = $(this).attr('id').replace('BFOkto', '');
      sum += parseInt($('#BFObel' + ordinal).val());
    });

    return sum;
}

И затем вызовите: 

getSum('1111');
getSum('1112');
...