Question

在下面的JSP中，我有一个列表，我正在迭代并使用附加按钮打印

JSP

<form action="servlet">
                                <table border="2">
                                    <th>Req no</th>
                                    <th>username</th>
                                    <th>Leave Type</th>
                                    <th>No of Days Requested</th>
                                    <th>Status</th>
                                    <th>Approve</th>
                                    <c:forEach var="pro" items="${userRequest}">
                                        <tr>
                                            <td><c:out value="${pro.reqno}"></c:out></td>
                                            <td><c:out value="${pro.user_name}"></c:out></td>
                                            <td><c:out value="${pro.leave_Type}"></c:out></td>
                                            <td><c:out value="${pro.no_of_days}"></c:out></td>
                                            <td><c:out value="${pro.status}"></c:out></td>
                                            <td><input type="submit" value="approve"></td>
                                            <td><input type="hidden" name="approve" value="yes"></td>
                                            <td><input type="hidden" name="reqno" value="${pro.reqno}"></td>
                                        </tr>
                                    </c:forEach>
                                </table>
                            </form>

output screen

如果我点击表单中的批准按钮，隐藏字段将获取所有行的值。我需要单独从单个行发布reqno（即）我单击按钮的行。请建议我一个想法。提前谢谢！

Answer 1

您需要将“批准”按钮从“提交”类型更改为“按钮”类型。
删除TR中的“隐藏”输入。

示例代码：

<tr>
    <td><c:out value="${pro.reqno}"></c:out></td>
    <td><c:out value="${pro.user_name}"></c:out></td>
    <td><c:out value="${pro.leave_Type}"></c:out></td>
    <td><c:out value="${pro.no_of_days}"></c:out></td>
    <td><c:out value="${pro.status}"></c:out></td>

    <td><input type="button" class="btnApproveReq" data-reqno="${pro.reqno}" value="approve"></td>
</tr>

使用jQuery来处理onclick：

<script type="text/javascript">
    $(document).ready(function () {

         $(".btnApproveReq").click( 
             function() {
                 var selectedReqNo = $(this).attr("data-reqno");

                 var urlToApprove = "/yourApp/req/approve?reqno=" + selectedReqNo;

                 // CALL AJAX to urlToApprove 

                 // Call this If you want to remove TR after AJAX success

                 // $(this).parent() --> TD
                 // $(this).parent().parent() --> TR
                 $(this).parent().parent().remove();
             }
         );
    });
</script>

从JSTL中的列表中选择一个项目

1 个答案: