JSP获取表的动态生成的行内的输入标签的值

Question

我正在尝试获取具有ID input字段的b_quantity标记的值，但是在表中生成数据时，我仅获取第一行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调用Servlet doPost方法。

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