Question

美好的一天，

我有一个动态表格，您可以在按下X按钮时添加和删除表格，每行都有一个当前数量字段和调整数量字段，并且还有一个新数量字段，当您输入数字时派生在调整后的数量字段，它的一切工作正常，但我想添加一个功能，将改变表格上方的已检查单选框上的每个总数量字段。就像单击IN（单选按钮）一样，操作将是ADD，如果单击OUT（单选按钮），操作将为MINUS，所有行都应受到单选按钮的每个'onchange'事件的影响。任何人都可以帮助我:)）

enter image description here

HTML：

<div class="col-xs-12">

            <div class="box">                                    
                <div class="box-body table-responsive">
                    <div id="records">
                          <div class="form-group">
                            <label for="departments">Department</label>
                            <select name="departments" id="">
                            @foreach($departments as $department)
                            <option value="{{$department->xid}}">{{$department->department}}</option>
                            @endforeach
                            </select>
                          </div>
                          <br>
                          <label for="radio">Adjustment Type</label>
                          <div class="radio">
                            <label><input type="radio" class="adjType" value="in" id="radioIn" name="optradio">Inventory In</label>
                          </div>
                          <div class="radio">
                            <label><input type="radio" class="adjType" value="out" id="radioOut" name="optradio">Inventory Out</label>
                          </div>
                          </div>

<label for="remarks">Remarks</label>
<input type="text" name="remarks" required id="memo" placeholder="Text input" class="form-control">
<br>  

<table class="table table-condensed" id="adjustmentTable">
  <thead>
    <tr>
      <th width="30%">Item</th>
      <th width="10%">Qty on Hand</th>
      <th width="10%">Adjusted Qty</th>
      <th width="10%">new Qty</th>
      <th width="10%">Current Cost</th>
      <th width="10%">Adjusted Cost</th>
      <th width="10%">Cost Diff</th>
      <th width="10%">Expiration Date</th>
      <th width="10%">Remove</th>
    </tr>
  </thead>
  <tbody>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>20</td>
      <td>10</td>
      <td>30</td>
      <td>10.40</td>
      <td>12.00</td>
      <td>.60</td>
      <td>11/21/1016</td>
      <td>X</td>
    </tr>
    <tr>
      <td>Item 31</td>
      <td>230</td>
      <td>16</td>
      <td>246</td>
      <td>31.40</td>
      <td>20.00</td>
      <td>-11.40</td>
      <td>11/21/1019</td>
      <td>X</td>
    </tr>
    <tr>
      <td>Item 6</td>
      <td>12</td>
      <td>19</td>
      <td>31</td>
      <td>22.40</td>
      <td>30.00</td>
      <td>7.60</td>
      <td>11/21/1016</td>
      <td>X</td>
    </tr>

  </tbody>
  </tbody>
</table>

JS：

<script>
var $this = $(document);

$this.on("change",'input[name="optradio"]',function(){
var rowCount = $('#adjustmentTable tr').length - 1;
});

Answer 1

您需要为＆＃34;更改＆＃34;创建事件处理程序。这些单选按钮上的事件。然后，这些事件处理程序将循环遍历表的所有行，并将AutoCalculateDifference函数应用于每一行。像这样：

$("#radioIn, #radioOut").change(function() {
    // The user clicked a radio button.  Now loop through all the 
    // rows in the table.  NOTE:  You should be more specific with
    // this jQuery selector to refer to the exact ID of the table.
    $("table tr").each(function() {
        autoCalculateDifferenceOnRow(this);
    });
});

如果你这样做，那么你需要稍微重构一下AutoCalculateDifference函数，以便能够处理代表行的传入参数，而不是总是使用＆＃34;这个＆＃34;。例如，

function autoCalculateDifferenceOnRow(currentRow) {

    if(document.getElementById('radioIn').checked) {
        var type = 1;
    }else if(document.getElementById('radioOut').checked) {
        var type = 0;
    }

    var $adjQty = $(currentRow).find('.adjQty');
    var $newCost = $(currentRow).find('.newCost');
    var $onHandQty = $(currentRow).find('p.onHandQty');
    var $qtyDiff = $(currentRow).find('p.qtydiff');
    var $currentCost = $(currentRow).find('p.currentCost');
    var $costDiff = $(currentRow).find('p.costDiff');

    // Update Quantity
    var onHandQty = parseInt($onHandQty.text(),10);
    if(type == 1)
    {
        var difference =  onHandQty + parseInt($adjQty.val());
    }
    else if(type==0)
    {
        var difference = onHandQty - parseInt($adjQty.val());
    }

    $qtyDiff.text(difference);

    // Update Cost
    var currentCost = $currentCost.text();
    var difference = $newCost.val() - currentCost;
    $costDiff.text(difference);
}

我还没有测试过上面的代码，但希望它可以帮助您朝着正确的方向前进。

当无线电改变时，重新计算每一行的总和

1 个答案: