求和输入文本字段

Question

我有一个包含输入文本字段的表，其基本结构如下所示。我在构建一个函数来迭代表中的所有行并求和以BFObel开头的输入字段的所有值，其中以BFObel开头的字段的值是相同的。因此，对于下面的基本示例，值1111的和将是2000，值1112的和将是3000。然后将每个总和写入id为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>

Answer 1

您需要使用对象文字来跟踪结果，并使用"属性以"开头的选择器来查找文本输入:

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)。

Answer 2

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');

Answer 3

另一种方法:查找所有前缀为BFObel的输入字段，对于每个字段，查找前缀为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']);

sum将是一个具有属性

的对象

i1111 = 2000
i1112 = 3000

尽管javascript允许，但最好不要为对象(关联数组)使用纯数字属性，因此使用i前缀

运行示例如下:http://jsfiddle.net/TbSau/1/