JSP 获取表的动态生成行中的输入标记的值

Question

我正在尝试获取具有 idb_quantity字段的input标签的值，但是当在表中生成数据时，我只获得了第一行b_quantity值。每一行都有不同的记录，当按钮单击此行中的b_quantity值时，应针对一个按钮，而不是第一行，所有其他行也是如此。如果有任何JQuery或JS代码，我愿意将其添加到我的JSP页面中。

预期输出： 单击Order按钮时，同一行中b_quantity的值应发送到 servlet post 方法。

观察到的输出： 单击Order按钮时，第一行中b_quantity的值将发送到 servlet post 方法。

<tbody>
<% 
List<Beverage> beverages = (List<Beverage>) request.getAttribute("beverageList");
for(Beverage b: beverages) {
%>
<tr>
<td  class="pt-3-half"><%= b.getName() %></td>
<td  class="pt-3-half"><%= b.getManufacturer() %></td>
<td  class="pt-3-half"><%= b.getQuantity() %></td>
<td  class="pt-3-half"><%= b.getPrice() %></td>
<% if (b.getIncentiveDTO() != null){ %>
<td class="pt-3-half"><%= b.getIncentiveDTO().getName() %> </td>                         
<%}else { %>
<td></td>
<%}%>
<td>
<input id="b_quantity" type="number"  class="b_quantity" min="0" max="<%=b.getQuantity()%>" value="0">
</td>
<td>
<input type="hidden" name="b_id" value="<%= b.getId() %>">
<!-- <input id="q_val" type="hidden" type="number" name="q_val" value="0"> -->
<a id="<%= b.getId() %>" href="" type="button" class="order btn btn-primary btn-lg">Order</a>
</td>
</tr>
<% } %>
</tbody>

我正在使用AJAX来调用ServletdoPost方法。

<script type="text/javascript">
$(document).ready(function() {
$(".order").click(function() {
event.preventDefault();
$.ajax({
url: '/frontend/new?b_id=' + event.target.id ,
type: 'Post',
data: {
b_quantity: $('#b_quantity').val()
},
success: function(response) {
location.href = "/frontend/beverages";
}
});
});
});

</script>

Answer 1

ID b_quantity不是唯一的，因为您要在表中生成行，每行都包含一个带有 id b_quantity的输入。由于输入也有类"b_quantity"，因此您可以使用它来查找输入。在您的点击处理程序中尝试此操作：

<script type="text/javascript">
$(document).ready(function() {
$(".order").click(function() {
event.preventDefault();
var myRow = $(this).parents('tr');
var quantity = $('.b_quantity',myRow).val();
$.ajax({
url: '/frontend/new?b_id=' + event.target.id ,
type: 'Post',
data: {
b_quantity: quantity
},
success: function(response) {
location.href = "/frontend/beverages";
}
});
});
});

</script>