多个输入字段的JS求和答案

【问题标题】：JS Summation of multiple inputs fields多个输入字段的JS求和
【发布时间】：2014-07-06 12:50:13
【问题描述】：

我有下表<th> 和<td> 如下：

Serial No.         Actual QTY            Input 1            Input 2
[  x1      ]        [ 5    ]             [      ]           [      ]
[  x2      ]        [ 9    ]             [      ]           [      ]

注意此[ ] 指示为输入文本字段

JS 代码：

function myFunction(v){
        var minus = v.value; 
        var original = v.getAttribute('data-original');
        var x = document.getElementById(v.getAttribute('data-goto'));
        x.value = original - minus;
        if(x.value < 0){
            alert('Actual QTY is Less than Zero!');
      }
    }

PHP 代码：

while($row = mysql_fetch_assoc($result)){
    echo "<tr>";
    echo "<td>".$row['serial_no']."</td><td>";
    echo "<input class='original' type='text' id='c".$row['serial_no']."' value='".$row['qty']."' />";
    echo "</td>";
    for($i=0;$i<2;$i++){
        echo "<td><input data-goto='c".$row['serial_no']."' data-original = '".$row['qty']."' onchange='myFunction(this);' type='text' name='n[]' /></td>";
    }
    echo "</tr>";
}

根据上表，我只想对每一行求和Input 1 和Input 2，然后通过从Actual QTY 中减去两个输入的总和来找到剩余的行，如下所示：

Actual QTY = (Input 1 + Input 2) - Actual QTY

PHP 和 JS 代码一次仅适用于 1 个输入字段，没有两个输入的总和，因此当用户在 Input 1 中插入一个值时，它会从实际数量减少！但是当同时插入Input 1 和Input 2 时，结果将是错误的。

我只想找到一种方法将两个输入字段关联在一起。

【问题讨论】：

标签： javascript php function input html-table

【解决方案1】：

如果您打算做很多此类事情，您可以考虑使用 MVVM 框架，例如敲除或剑道。在保持页面上的相关元素同步时，它们将大有帮助。

在这种情况下，我使用了 jQuery，因为其他人有一些设置，如果这种类型的行为不是您的应用程序的典型行为，那将是矫枉过正。

http://jsbin.com/tapoxoke/1/edit?html,js,output

<table>
  <tr>
    <th>Actual Qty</td>
    <th>Input 1</td>
    <th>Input 2</td>
  </tr>
  <tr>
    <td class="actual-qty">5</td>
    <td><input/></td>
    <td><input/></td>
  </tr>    
<tr>
  <td class="actual-qty">7</td>
  <td><input/></td>
  <td><input/></td>
  </tr> 
  <tr>
    <td class="actual-qty">3</td>
    <td><input/></td>
    <td><input/></td>
  </tr> 
</table>

<script>
$('input').on('change', function(e) {
   var $inputElement = $(e.target);
   $tableRow = $inputElement.closest('tr');
   $bothInputs = $tableRow.find('input');
   var actualQtyElement = $tableRow.find('.actual-qty')[0];

   var sumOfInputs = getSumOfInputs($bothInputs);
   var actual = getValueFromString(actualQtyElement.textContent);

   if(actual < sumOfInputs) {
     alert('Actual QTY is Less than Zero!');
   }
});


var getSumOfInputs = function($inputs) {
  var sum = 0;
  $inputs.each(function(index) {
    var input = $inputs[index];
    sum += getValueFromString(input.value);
  });
  return sum;
};

var getValueFromString = function(value) {
  value = parseInt(value);
  var isNan = Number.isNaN(value);
  return (isNan) ? 0 : value;
};
</script>

【讨论】：