在jsp页面中获取表格中的文本框里的数据和与其同一行的第一格中的数据的一个方法

直接上代码

表格代码

<c:forEach var="food" items="${requestScope.menu.list}">
    <tr>
        <td>${food.id}</td>
        <td>${food.foodName}</td>
        <td>${food.foodPrice}</td>
        <td class="buy"><input type="text" class="inputs" placeholder="请输入添加数量"></td>
    </tr>
</c:forEach>

用jstl中的foreach方法动态生成表格，因为用了PageHelper的缘故，所以items中的参数会写成那样。

jQuery代码

 $(".inputs").blur(function () {
        const count = $(this).val();
        const foodId = $(this).closest("tr").find("td").first().text();
        console.log("count:" + count);
        console.log("foodId:" + foodId);
        $.ajax({
            url: "http://localhost:8081/SSM_war_exploded/ordermanage",
            method:"POST",
            data:{foodId:foodId,count:count},
            contentType:"application/x-www-form-urlencoded; charset=utf-8",
            error:function (res) {
                alert("添加失败！");
            }
        })
    })

其中$(".inputs")是选择器，选中了该文本框，.blur是该对象失去焦点时执行，$(this)指该对象，.closest("tr")指寻找到离该文本框最近的<tr>标签对象，.find("td").first()指在该<tr>标签对象下寻找第一个<td>标签对象，.test()指获取其中内容。

这样就可以获取这些内容然后用ajax传递给后端了。