Question

我正在拥有6个字段的表格，并且在最后一个字段中有更新按钮，只显示那个弹出窗口，但弹出窗口每次只输入表格中的第一个条目，即使按下第二个或第三个条目＆＃39 ; s更新按钮。

这是我的JSP代码`

<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Report</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="col-sm-2"></div>
    <div class="col-sm-8">
        <div class="panel panel-primary">
            <div class="panel-heading">Details of Students</div>
            <div class="panel-body">

                <button id="newbtn" type="button"
                    class="form-control btn btn-success">Add New Student</button>

                    <button id="shwbtn" type="button"
                    class="form-control btn btn-success">show</button>

                <div style="margin-top: 40px;">

                    <table class="table table-bordered" id="updatedetailsFrm">
                        <thead>
                            <tr style="background-color: #E0E0E1;">
                                <th>Sr.No.</th>
                                <th>Name</th>
                                <th>Surname</th>
                                <th>Contact No</th>
                                <th>Email</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <s:if test="noData==true">

                            <s:iterator value="beanList">
                                <tr>
                                    <td><s:property value="srNo" /></td>
                                    <td><s:property value="name" /></td>
                                    <td><s:property value="surname" /></td>
                                    <td><s:property value="contactno" /></td>
                                    <td><s:property value="email" /></td>

                                    <td>

                                        <a href="#popupLogin" data-rel="popup"
                                        data-position-to="window" id="updateBtnfirst"
                                        class="ui-btn ui-corner-all ui-shadow" data-transition="pop">Update</a>

                                        <div data-role="popup" id="popupLogin" data-theme="a"
                                            class="ui-corner-all">
                                            <form id="updatedetailsFrm" method="post">
                                                <div style="padding: 10px 20px;">
                                                    <h3>Update Your Data</h3>

                                                    <input id="name" placeholder="Name" type="text" name="name"
                                                        value='<s:property value="name"/>'>

                                                    <input id="surname" placeholder="Surname" type="text"
                                                        name="surname" value='<s:property value="surname"/>'>

                                                    <input id="contactno" placeholder="Contact No" type="text"
                                                        name="contactno" value='<s:property value="contactno"/>'>

                                                    <input id="email" class="disabled" placeholder="Email" type="text"
                                                        name="email" value='<s:property value="email"/>'>

                                                    <button value="update" type="button" id="updateBtn">Update</button> 
                                                </div>

                                            </form>
                                        </div>
                                        <button class="btn btn-danger" id="deleteBtn">Delete</button>
                                    </td>
                                </tr>
                            </s:iterator>
                        </s:if>
                    </table>

                    <s:else>
                        <div style="color: red;">No Data Found.</div>
                    </s:else>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-2"></div>

    <script>
        $("#updateBtn").click(function() {
            var id = document.forms["updatedetailsFrm"]["email"].value;
            var userName = document.forms["updatedetailsFrm"]["name"].value;
            var surName = document.forms["updatedetailsFrm"]["surname"].value;
            var contactNo = document.forms["updatedetailsFrm"]["contactno"].value;

            window.location = "updatedetails.action?email="+id+"&name="+userName+"&surname="+surName+"&contactno="+contactNo;

        })

//      $('#updateBtnfirst').click(function() {
//          document.getElementById("email").disabled = true;

//      })

        $('#newbtn').click(function() {
            window.location.href = "insert.jsp";
        })

        $('#shwbtn').click(function() {
            window.location = "report";
        })

        $("#deleteBtn").click(function() {
            var id = $(this).closest("tr").find('td:eq(4)').text();
            window.location.href = "deleterecord.action?&email=" + id;
        })

    </script>

</body>
</html>

`

所以，我的问题是，popup应该在弹出窗口中显示行明智的细节，特别是行。

Answer 1

您的迭代器会一遍又一遍地生成具有相同ID的所有行。更新迭代器以为每行中的每个表单生成唯一ID。然后我会从更新按钮中删除ID并使用类，因此很容易绑定您的click事件并使用HTML“data”属性来保存表单ID值。然后，当单击更新按钮时，您的JavaScript将能够获取数据属性值，然后通过唯一ID定位正确的表单。

示例更新按钮：

<button value="update" type="button" class="updateBtn" data-form-id="updatedetailsFrm-1">Update</button>

示例表单ID：

<form id="updatedetailsFrm-1" method="post">

使用重复的ID，您将只检索您尝试在DOM中定位的内容的第一个实例。您的迭代器中还有其他ID，您也需要查看。 ID应该是唯一的。

每次弹出表首次进入表格

1 个答案: