每次都會彈出表格的第一項

Question

我有6個字段的表，最后一個字段中有更新按鈕，出現一個彈出窗口的onclick，但每次按下第二或第三項的更新按鈕時，彈出窗口僅占用表中的第一項。

這是我的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>

`

因此，我的問題是，彈出窗口應在彈出窗口中，特別是在行中引入行的詳細信息。

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 個解決方案

解決方案1
0 2018-04-07 12:57:03

每次都會彈出表格的第一項

問題描述

1 個解決方案

解決方案1 0 2018-04-07 12:57:03

解決方案1
0 2018-04-07 12:57:03