Javascript jQuery根据两个字段之间的差异设置动态创建的输入字段

是否有一种方法可以根据两个动态创建的字段之间的差异设置每个动态创建的输入字段的输入值。下面是我的代码和我试图实现的目标

HTML

<table id="requested-wh-stock-table" class="table table-bordered table-hover dataTable" width="100%">
    <thead>
        <tr>
            <th>Luminaire</th>
            <th>Order Quantity</th>
            <th>Delivered Qty</th>
            <th>Back Order Qty</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($salesorder as $request)
        <tr>
            <td><input type="text" class="form-control" name="luminaire" value="{{$request->luminaire}}" readonly></td>
            <td><input type="number" class="form-control" name="order_quantity" id="order_quantity"
                    value="{{$request->quantity}}" readonly /></td>
            <td><input type="number" class="form-control" name="delivered_quantity" id="delivered_quantity" value="" />
            </td>
            <td><input type="number" class="form-control" name="backorder_quantity" id="backorder_quantity" value=""
                    readonly /></td>
        </tr>
        @endforeach
    </tbody>
</table>

目前，它只更新第一个字段，不更新其他字段，是否有一种方法可以在更改交货数量字段时循环所有字段并更新延期交货字段

---

您不应该在非唯一的元素上使用

id

。由于输入将被呈现多次（以行为单位），因此我建议不要使用

id

属性。因此，让我们尝试使用

name

属性来查找DOM

在

delivered\u quantity

input的

change

事件侦听器上，获取同一行中的其他字段。要做到这一点，请从事件处理程序中的

this

对象中查找最近的

tr

，然后从其子字段中查找特定字段

$（文档）.ready（函数（）{
$（“[name=delivered\u quantity]”）。更改（函数（）{
var order_quantity=$（this）.closest（'tr'）。find（“[name=order_quantity]”）。val（）
var delivered_quantity=$（this.closest（'tr'）。find（“[name=delivered_quantity]”）。val（）；
var缺货数量=订单数量-交货数量
$（this）.closest（'tr'）.find（“[name=backorder\u quantity]”）.val（backorder\u quantity）；
});
});

如果在循环中动态更新这些字段，将与ID发生命名冲突。相反，我将设置每个字段的类名，而不是ID：

<tr>
   <td><input type="text" class="form-control" name="luminaire" value="10" readonly></td>
   <td><input type="number" class="form-control order_quantity" name="order_quantity" id="order_quantity" value="20" readonly/></td>
   <td><input type="number" class="form-control delivered_quantity" name="delivered_quantity" id="delivered_quantity" value=""/></td>
   <td><input type="number" class="form-control backorder_quantity" name="backorder_quantity" id="backorder_quantity" value="" readonly/></td>
</tr>

---

我们将更改事件附加到表中可能针对的每个交付数量元素。当它们中的任何一个遇到此事件时，将出现上面的回调函数。接下来，我们得到一个表行的父元素。然后，我们得到order_quantity和backorder_quantity元素，它们是表行中的子元素。然后，我们计算backorder\u数量变量，然后更新backorder\u数量元素以匹配该值。请注意，我必须为您的亮度和顺序数量输入一些随机值，我们不知道这些值在循环中使用时的意义

这回答了你的问题吗？我有另一个问题，不知道你是否可以在这里帮助我，或者我是否应该问一个新问题。。。我有一个模式，显示当搁置文本框点击，模式有一个下拉列表。我想从该列表中选择一个项目，并将其分配到“搁置编号”字段，但由于“保存按钮”不起任何作用，我遇到了问题。下面是我的保存模式代码

$（'.shelve\u number'）。on（'change'，function（）{let parent=$（this）。parents（'tr'）；let shelve=parent.find（'.shelve\u number'）；var selected\u shelve=jQuery（'shelve\u no option:selected'）。val（）；var shelve\u selected=JSON.parse（selected\u shelve）.shelve_no；$（'#save_modal'）。在（'click'，函数（x）{shelve.val（shelve_selected）；$（'#myModal'）。modal（'hide'）；}）；}）
<tr>
   <td><input type="text" class="form-control" name="luminaire" value="10" readonly></td>
   <td><input type="number" class="form-control order_quantity" name="order_quantity" id="order_quantity" value="20" readonly/></td>
   <td><input type="number" class="form-control delivered_quantity" name="delivered_quantity" id="delivered_quantity" value=""/></td>
   <td><input type="number" class="form-control backorder_quantity" name="backorder_quantity" id="backorder_quantity" value="" readonly/></td>
</tr>

$(document).ready(function() {
    $('.delivered_quantity').on('change', function() {
        let parent = $(this).parents('tr');
        let order_quantity = parent.find('.order_quantity');
        let backQuant = parent.find('.backorder_quantity');
        let backorder_quantity = order_quantity.val() - $(this).val();
        backQuant.val(backorder_quantity);
    });
});