将文本框值与ID相乘

时间:2015-05-13 17:45:43

标签: jquery math

我有一系列文本框,我需要将这些值相乘并在相应的范围内显示结果。 ID值都以相似的值开头,所以我试图想出一个优雅的解决方案来执行这个功能。

以下是一些示例代码:

angular.module('MyApp').factory("StoreItems", ["$firebaseObject", "$firebaseArray", "GetFireBaseObject",
    function($firebaseObject, $firebaseArray, GetFireBaseObject) {
        var StoreItemsRef = GetFireBaseObject.DataURL('StoreItems/');
        return {
            AllStores: function() {
                return $firebaseObject(StoreItemsRef);
            },
            OneStore: function(StoreKey) {
                var OneStoreRef = StoreItemsRef.child(StoreKey);
                return $firebaseObject(OneStoreRef);
            },
            OneStoreItems: function(StoreKey) {
                var OneStoreRef = StoreItemsRef.child(StoreKey);
                return $firebaseArray(OneStoreRef);
            }
        };
    }
]);

angular.module('MyApp').controller("StoreItemsCtrl", ["$scope", "StoresData", "StoreItems", 
    function($scope, StoresData, StoreItems) {
        var StoreData = {};

        $scope.StoreList = StoresData.AllStores();
        $scope.SelectedStoreKey = null;

        $scope.LoadStoreData = function(StoreKey) {
            $scope.SelectedStore = StoresData.OneStore(StoreKey);
            $scope.StoreItemData = StoreItems.OneStoreItems(StoreKey);

            StoreData = StoreItems.OneStoreItems(StoreKey);
            $scope.StoreItemsGrid.data = StoreData;
        };

        columnDefs = [
            { field: "Key", displayName: "Product Code", visible: true, groupable: false, resizable: true, sortable: true },
            { field: "UnitPrice", displayName: "Unit Price", visible: true, groupable: false, resizable: true, sortable: true, cellFilter: 'currency' },
            { field: "nForPrice", displayName: "nFor Price", visible: true, groupable: false, resizable: true, sortable: true },
            { field: "nForQuantity", displayName: "nFor Qty", visible: true, groupable: true, resizable: true, sortable: true }
        ];

        $scope.StoreItemsGrid = { 
            enableSorting: true
        };
        $scope.StoreItemsGrid.columnDefs = columnDefs;
        $scope.StoreItemsGrid.data = StoreData;
    }
]);

我需要将addsys-lbs-n中的值乘以addsys-arm-n中的值,并在相关的addsys-moment-n中显示。所以我基本上在寻找以下代码的优雅解决方案:

<tr><td><input type="text" name="addsys-lru-1"/></td><td><input type="number" name="addsys-lbs-1"/></td><td><input type="number" name="addsys-arm-1"/></td><td><span id="addsys-moment-1"></span></td></tr>
<tr><td><input type="text" name="addsys-lru-2"/></td><td><input type="number" name="addsys-lbs-2"/></td><td><input type="number" name="addsys-arm-2"/></td><td><span id="addsys-moment-2"></span></td></tr>
<tr><td><input type="text" name="addsys-lru-3"/></td><td><input type="number" name="addsys-lbs-3"/></td><td><input type="number" name="addsys-arm-3"/></td><td><span id="addsys-moment-3"></span></td></tr>

其中每组addsys-lbs和addsys-arm值将显示在addsys-moment范围内。

我希望这是有道理的。谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

使用所有类似元素的类。然后,您可以通过搜索类找到与Arm字段相同的行中的Weight字段。

&#13;
&#13;
$('.addsys-arm').focusout(function() {
  var row = $(this).closest("tr");
  var weight = row.find('.addsys-lbs').val();
  var arm = $(this).val();
  var sum = weight * arm;
  row.find('.addsys-moment').text(sum);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><th>LRU</th><th>Weight</th><th>Arm</th><th>Moment</th></tr>
    <tr><td><input type="text" class="addsys-lru" name="addsys-lru-1"/></td><td><input type="number" class="addsys-lbs" name="addsys-lbs-1"/></td><td><input type="number" class="addsys-arm" name="addsys-arm-1"/></td><td><span class="addsys-moment" id="addsys-moment-1"></span></td></tr>
    <tr><td><input type="text" class="addsys-lru" name="addsys-lru-2"/></td><td><input type="number" class="addsys-lbs" name="addsys-lbs-2"/></td><td><input type="number" class="addsys-arm" name="addsys-arm-2"/></td><td><span class="addsys-moment" id="addsys-moment-2"></span></td></tr>
    <tr><td><input type="text" class="addsys-lru" name="addsys-lru-3"/></td><td><input type="number" class="addsys-lbs" name="addsys-lbs-3"/></td><td><input type="number" class="addsys-arm" name="addsys-arm-3"/></td><td><span class="addsys-moment" id="addsys-moment-3"></span></td></tr>
</table>
&#13;
&#13;
&#13;