时间戳

首页 > 解决方案 > jQuery.ajax - 用新值更新表格单元格

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

问题描述

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

$(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>

标签： javascriptjquery

解决方案

首先，单元格应该有类而不是 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)获取 jQuery 等效的当前范围this，即表单。然后在表单的兄弟姐妹中搜索正确的类并修改元素。

推荐阅读