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

我试图获取id为

b_数量

字段的

input

标记的值，但在表中生成数据时，我仅获取第一行

b_数量

值。每一行都有不同的记录和按钮，当按钮单击此行中的

b_quantity

值时，应将其作为目标，而不是第一行。所有其他行的目标相同。如果有任何

JQuery

或

JS

代码，我愿意将其添加到我的JSP页面

预期产出： 单击

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>

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

观测输出： 单击

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>

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

---

ID b_数量不是唯一的，因为您正在表中生成行，每行包含ID b_数量的输入。由于输入也有“b_数量”类，因此可以使用该类来查找输入。在单击处理程序中尝试以下操作：

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

$（文档）.ready（函数（）{
$（“.order”）。单击（函数（）{
event.preventDefault（）；
var myRow=$（this.parents（'tr'）；
var数量=$（'.b_数量'，myRow）.val（）；
$.ajax({
url:'/frontend/new？b_id='+event.target.id，
键入：“Post”，
数据：{
b_数量：数量
},
成功：功能（响应）{
location.href=“/frontend/beverages”；
}
});
});
});

id在页面中必须是唯一的。id是

input

标记的唯一id，即

b\u quantity

，那么在您的示例中这是打字错误吗？当然现在看起来像是一个静态字符串值。什么打字错误我更新了问题的详细信息以获得更多的澄清。谢谢你的回答，但当我点击按钮时，我变得没有定义。我使用了返回未定义的警报数量。我做了一个更正：将.parent更改为.parentsYes，它也适用于

$（this）.parent（'td'）.parent（'tr'）