Javascript Jquery动态表中最近的输入

我是Jquery和Rails的初学者

我试图从rails控制器获取数据，并将其设置为动态表中的文本字段

HTML

<tbody id="template">
            <tr>
                <td>
                    <select name="order[order_placed][][itemname]" id="order_place_id" class="form-control delete-comment" style="width: 300px">
                        <option value=""></option>
                        <% Item.all.each do |item| %>
                            <option value="<%= item.item_name %>">
                                <%= item.item_name %>
                            </option>
                            <% end %>
                    </select>
                </td>

                <td><input name="order[order_placed][][quantity]" type="text"  size='10' class="form-control" /></td>
                <td><input name="order[order_placed][][unitprice]" type="text"  size='10' class="form-control" /></td>
                <td><input name="order[order_placed][][tax]" type="text"  size='10' class="form-control"/></td>
                <td><input name="order[order_placed][][discount]" type="text"  size='10' class="form-control"/></td>
                <td><input name="order[order_placed][][itemtotalprice]" type="text" size='10' class="form-control" /></td>
                <td>
                    <button type="button" class="btn btn-default btn-sm sub" onClick="$(this).closest('tr').remove();">
                        <span class="glyphicon glyphicon-minus"></span>
                    </button>
                </td>
            </tr>
        </tbody>

---

如果我们直接分配数据（

Data.tax

和

Data.discount

已正确设置），数据将正确获取并设置到文本框中。 由于表格是动态的，我试图通过查找最近的

tr

元素，然后再查找下一个

td

（选择元素）再查找下一个

td

（数量）再查找下一个

td

（单价）。[这是我想要放置数据的文本字段。]

但这并不正常

能找个人帮忙吗

---

提前谢谢

此

不引用当前元素

success

回调，因此

$（此）

将不起作用

您可以在变量中缓存

TR

的引用，该变量可用于

success

回调

$(document).on('change', 'select', function() { //var url = $('.delete-comment').attr('data-url');
  //Keep a reference of current element 
  var tr = $(this).closest('tr');

  $.ajax({
        ...
        success: function(data) {
            tr.find('input[name="order[order_placed][][unitprice]"]').val(data.unit_price);
            tr.find('input[name="order[order_placed][][tax]"]').val(data.tax);
            tr.find('input[name="order[order_placed][][discount]"]').val(data.discount);
        },
    });
});

---

或者，您可以设置的

context

选项

---

此

不引用当前元素

success

回调，因此

$（此）

将不起作用

您可以在变量中缓存

TR

的引用，该变量可用于

success

回调

$(document).on('change', 'select', function() { //var url = $('.delete-comment').attr('data-url');
  //Keep a reference of current element 
  var tr = $(this).closest('tr');

  $.ajax({
        ...
        success: function(data) {
            tr.find('input[name="order[order_placed][][unitprice]"]').val(data.unit_price);
            tr.find('input[name="order[order_placed][][tax]"]').val(data.tax);
            tr.find('input[name="order[order_placed][][discount]"]').val(data.discount);
        },
    });
});

---

或者，您可以设置的

context

选项

$(document).on('change', 'select', function() {

    $.ajax({
        ...
        context: $(this).closest('tr'), // Set  context to TR 
        success: function(data) {
            $(this).find('input[name="order[order_placed][][unitprice]"]').val(data.unit_price);
            $(this).find('input[name="order[order_placed][][tax]"]').val(data.tax);
            $(this).find('input[name="order[order_placed][][discount]"]').val(data.discount);
        },
    });
});