动态表中的Jquery最接近输入答案

【问题标题】：Jquery closest input in dynamic table动态表中的Jquery最接近输入
【发布时间】：2018-01-23 16:18:37
【问题描述】：

我是 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>

    $(document).on('change', 'select', function() {    //var url = $('.delete-comment').attr('data-url');
        $.ajax({
          url: "/items/getdata",
          type: 'get',
          data: {data_value: $(this).val()},
          dataType: 'json',
          success: function (data) {         $(this).closest('tr').next('td').next('td').next('td').find('input[name="order[order_placed][][unitprice]"]').val(data.unit_price);
             $('input[name="order[order_placed][][tax]"]').val(data.tax);
             $('input[name="order[order_placed][][discount]"]').val(data.discount);
 },        error: function () {
            alert('error');
          }
        }); 
      });

如果我们直接分配它们，数据会正确获取并设置到文本框（data.tax 和data.discount 设置正确）。由于表格是动态的，我试图通过查找最接近的tr 元素然后下一个td（选择元素）再下一个td（数量）再下一个td（单价）来放置数据。 [这是我要放置数据的文本字段。]

但这不能正常工作。

有人可以帮忙吗？

提前谢谢...！！！

【问题讨论】：

标签： javascript jquery html ruby-on-rails

【解决方案1】：

this 不引用当前元素 success 回调，因此 $(this) 将不起作用。

您可以将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);
        },
    });
});

或者，您可以设置$.ajax()的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);
        },
    });
});

【讨论】：