Question

我使用Thymeleaf从Spring填充表格。

<tr th:each="customerOrder : ${selected}" >
         <td>
             <img th:attr="src=${customerOrder.photo}" width="80" height="56" />
         </td>
         <td align="center">
             <span th:text="${customerOrder.name}" >Name</span>
         </td>
         <td align="center" >
           <input type="text" name="quantityNew" th:value="${customerOrder.quantity}"/>          
         </td>
         <td align="center">
             <div class="editInfoFromCustomerOrder">
                 <input type="hidden" name="editOrderId" th:value="${customerOrder.id}"/>
                 <input type="button" value="Save edit"/>
             </div>
         </td>
</tr>

我希望从<input type="hidden" name="editOrderId" th:value="${customerOrder.id}"/>获得价值，但我不明白为什么我的代码不起作用。我尝试使用这段代码：

 $('.editInfoFromCustomerOrder').on('click', function (e) {
    var orderId = $(this).find('input[name=editOrderId]').val();
    var quantityChange = $(this).find('input[type=text][name=quantityNew]').val();
    alert("OrderId: "+orderId+" Quantity: "+quantityChange);
  });

我收到了值orderId，但收不到quantityChange。
我的错误在哪？

Answer 1

.find()仅搜索您正在使用它的元素的子项。由于$(this)是div（具有子元素name=editOrderId），因此它将找到该元素。由于name=quantityNew不在div之内，因此无法匹配。

在我看来，你应该构建这样的调用：

的Javascript

$(function() {
  $('.save').click(function (e) {
    var id = $(this).data('customer-id');
    var quantity = $('#quantity-' + id).val();
    alert("OrderId: " + id + " Quantity: " + quantity);
  });
});

HTML

  <tr th:each="customerOrder : ${selected}" >
    <td><img th:attr="src=${customerOrder.photo}" width="80" height="56" /></td>
    <td align="center" th:text="${customerOrder.name}" />
    <td align="center"><input type="text" th:id="${'quantity-' + customerOrder.id}" th:value="${customerOrder.quantity}"/></td>
    <td align="center"><input type="button" class="save" th:attr="data-customer-id = ${customerOrder.id}" value="Save edit"/></td>
  </tr>

如何从百里香叶表获得输入值？

1 个答案: