Question

我有以下表<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上同时插入时，结果将为false。

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

Answer 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>

JS多个输入字段的求和

1 个答案: