Question

晚上好。下面的代码旨在用新的数量和新的检查日期更新几个表单元格。但是，它仅更新表中的第一行。任何帮助表示赞赏。

$(document).ready(function() {
    $("form").on("submit", function(event) {
      event.preventDefault();
      var res = $(this).serialize();

      var req = $.ajax({ 
      url: '/stock/update',
      type: 'POST',
      data: res,
      dataType: 'json',
      success: function(response) { 
        //console.log(response);
        $('#qty').text(response.qty_new);
        $('#date').text(response.date);
        }

      });

    });
});

以下是所请求的HTML：

<table>
    <th>Part</th>
    <th>Location</th>
    <th>Quantity</th>
    <th>Date Checked</th>
    <th>New Quantity</th>
    <th>Update</th>

    % for row in stock:
    <tr>
        <td id='part'>{{row['part']}}</td>
        <td id='location'>{{row['location']}}</td>
        <td id='qty'>{{row['qty']}}</td>
        <td id='date'>{{row['date']}}</td>
        <form>
            <input type='hidden' name='part' value="{{row['part']}}">
            <input type='hidden' name='location' value="{{row['location']}}">
            <td><input type='number' name='qty_new' style='width: 4em;'></td>
            <td><button id='update_qty'>Save</button></td>
        </form>
    </tr> 
    % end

</table>

Answer 1

首先，单元格应该具有类而不是ID，因为存在重复项。

<td class='part'>{{row['part']}}</td>
<td class='location'>{{row['location']}}</td>
<td class='qty'>{{row['qty']}}</td>
<td class='date'>{{row['date']}}</td>
<form>
    <input type='hidden' name='part' value="{{row['part']}}">
    <input type='hidden' name='location' value="{{row['location']}}">
    <td><input type='number' name='qty_new' style='width: 4em;'></td>
    <td><button class='update_qty'>Save</button></td>
</form>

接下来，您需要一种方法，根据提交的表单来选择它们。

$(document).ready(function() {
  $("form").on("submit", function(event) {
    event.preventDefault();
    var $form = $(this);
    var res = $form.serialize();

    var req = $.ajax({ 
      url: '/stock/update',
      type: 'POST',
      data: res,
      dataType: 'json',
      success: function(response) { 
        $form.siblings('.qty').text(response.qty_new);
        $form.siblings('.date').text(response.date);
      }
    });
  });
});

$(this)获得this的jQuery等效当前范围，即形式。然后，在表单的同级中搜索正确的类，并修改元素。

jQuery.ajax-使用新值更新表格单元

1 个答案: