JSP 获取 table 动态生成的行中输入标签的值

Question

我正在尝试获取具有 id b_quantity 字段的 input 标签的值，但是当数据生成于table。每行都有一个不同的记录和一个按钮，当按钮单击该行内 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 不是唯一的，因为您在 table 中生成行，每一行都包含一个 ID 为 b_quantity 的输入。由于输入也有 class '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>

JSP 获取 table 动态生成的行中输入标签的值

JSP get the value of input tag inside dynamically generated rows of a table

javascript

ajax

jquery

jsp

servlets