javascript - JSP 在动态生成的表行中获取输入标签的值

Question

我正在尝试获取具有 id b_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 调用 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>