个人中心
gpt4 book ai didi

javascript - 将元素列表传递给循环以显示内容时，但id始终返回最后一个元素

转载 作者：行者123 更新时间：2023-11-28 03:08:06 25 4
gpt4 key购买 nike

使用ajax中的循环，根据列表中的值显示元素列表。我还在循环内动态添加了一个按钮来绑定每行数据，并使用本地存储来根据行获取元素ID。

但是，当我单击按钮时，它显示了最后一个列表元素的数据。那就是本地存储ID，只返回最后一个元素ID！
这是我的代码


<html>
<head>
    <center><h1 style="color:red">New Entries</h1></center>
</head>
<body>
    <form id="form2">
        <table class="table" id="t1">
            <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        FNAME
                    </th>
                    <th>
                        LNAME
                    </th>
                    <th>
                        LOCATION
                    </th>
                    <th>
                        CONTACT
                    </th>
                    <th>
                        EMAIL
                    </th>

                    <th>
                        PASSWORD
                    </th>

                    <th>
                        CATEGORY
                    </th>
                    <th>
                        STATUS
                    </th>
                </tr>
            </thead>
            <tbody></tbody>
            @*<tr>
                <td><button type="button" class="btn btn-primary" id="approve">Approve/Reject</button></td>
            </tr>*@
                @*@foreach (var cust1 in ViewBag.Customers)
                {*@
        @*<tbody>
            <tr>
                <td id="Id"></td>
                <td id="Fname"></td>
                <td id="Lname"></td>
                <td id="Location"></td>
                <td id="Contact"></td>
                <td id="Email"></td>
                <td>**********</td>
                <td id="Category"></td>
                <td id="Status"></td>*@

                @*<td><button type="button" class="btn btn-primary" id="log" onclick="location.href='@Url.Action("pro","Home",new { cust1.Id })'">Activity Log</button></td>*@
            @*</tr>
        </tbody>*@
                @*}*@
                <tr>
                    <td><button type="button" class="btn btn-primary" id="back">Back</button></td>
                </tr>
        </table>
    </form>
</body>
</html>

@section Scripts{
<script>
     var ids = [];
    var id = localStorage.getItem("empid");
    $.ajax({
    contentType: "application/json",
    type: "GET",
    url: "https://localhost:44397/api/Values/Addap",
        success: function (data) {

            var res = data;  
            $.each(data, function (i, res) {
                localStorage.setItem("dd", res.id);
               // ids.push(res.id);

                var rows = "<tr>"
                    + "<td>" + res.id + "</td>"
                    + "<td>" + res.fname + "</td>"
                    + "<td>" + res.lname + "</td>"
                    + "<td>" + res.location + "</td>"
                    + "<td>" + res.contact + "</td>"
                    + "<td>" + res.email + "</td>"
                    + "<td>" + res.password + "</td>"
                    + "<td>" + res.category + "</td>"
                    + "<td>" + res.status + "</td>"
                    + '<td><button type="button" class="btn btn-primary" id="approve" >Approve/Reject</button> </td>'
                    +'<td><button type="button" class="btn btn-primary" id="log">Activity Log</button></td>'
                    + "</tr>";
                $('#t1 ').append(rows);
            });
        },
        error: function (jqXHR, textStatus, errorThrown) {
        $("#postResult").val(jqXHR.statusText);
    }
        });

    $(document).on("click", "#approve", function(e){

        var id = localStorage.getItem("dd");


            $.ajax({
                contentType: "application/json",
                type: "GET",
                url: "https://localhost:44397/api/Values/Approve/" + id,
                success: function (data) {
                    window.location.href = "/Home/Approve/" + data.id;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('error');
                    $("#postResult").val(jqXHR.statusText);
                }
            });
    });



    $("#back").click(function (e) {
            $.ajax({
                contentType: "application/json",
                type: "GET",
                url: "https://localhost:44397/api/Values/Details/" + id,
                success: function (data) {
                    window.location.href = "/Home/Details/" + data.id;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Invalid Username or Password / waiting for admin approval')
                    $("#postResult").val(jqXHR.statusText);
                }
            });
        });
</script>
}


任何人都知道为什么在 #approve中本地存储ID返回最后一个元素ID。

最佳答案

我得到了答案谢谢你们
它在这里：



<html>
<head>
    <center><h1 style="color:red">New Entries</h1></center>
</head>
<body>
    <form id="form2">
        <table class="table" id="t1">
            <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        FNAME
                    </th>
                    <th>
                        LNAME
                    </th>
                    <th>
                        LOCATION
                    </th>
                    <th>
                        CONTACT
                    </th>
                    <th>
                        EMAIL
                    </th>

                    <th>
                        PASSWORD
                    </th>

                    <th>
                        CATEGORY
                    </th>
                    <th>
                        STATUS
                    </th>
                </tr>
            </thead>
            <tbody></tbody>

                <tr>
                    <td><button type="button" class="btn btn-primary" id="back">Back</button></td>
                </tr>
        </table>
    </form>
</body>
</html>

@section Scripts{
<script>


    var id = localStorage.getItem("empid");
    $.ajax({
    contentType: "application/json",
    type: "GET",
    url: "https://localhost:44397/api/Values/Addap",
        success: function (data) {

            var res = data;  
            $.each(data, function (i, res) {


                var rows = "<tr>"
                    + "<td>" + res.id + "</td>"
                    + "<td>" + res.fname + "</td>"
                    + "<td>" + res.lname + "</td>"
                    + "<td>" + res.location + "</td>"
                    + "<td>" + res.contact + "</td>"
                    + "<td>" + res.email + "</td>"
                    + "<td>" + res.password + "</td>"
                    + "<td>" + res.category + "</td>"
                    + "<td>" + res.status + "</td>"
                    + '<td><button type="button" class="btn btn-primary" id="approve" onclick="empapprove('+res.id+')">Approve/Reject</button> </td>'
                    +'<td><button type="button" class="btn btn-primary" id="log" onclick="emplog('+res.id+')">Activity Log</button></td>'
                    + "</tr>";
                $('#t1 ').append(rows);
            });
        },
        error: function (jqXHR, textStatus, errorThrown) {
        $("#postResult").val(jqXHR.statusText);
    }
        });

    function empapprove(empid) {
        localStorage.setItem("dd", empid);

            $.ajax({
                contentType: "application/json",
                type: "GET",
                url: "https://localhost:44397/api/Values/Approve/" + empid,
                success: function (data) {
                    window.location.href = "/Home/Approve/" + empid;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('error');
                    $("#postResult").val(jqXHR.statusText);
                }
            });
    }

    function emplog(empid) {

        $.ajax({
            contentType: "application/json",
            type: "GET",
            url: "https://localhost:44397/api/Values/Pro/" + empid,
            success: function (data) {
                window.location.href = "/Home/Pro/" + empid;
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('error');
                $("#postResult").val(jqXHR.statusText);
            }
        });
    }





    $("#back").click(function (e) {
            $.ajax({
                contentType: "application/json",
                type: "GET",
                url: "https://localhost:44397/api/Values/Details/" + id,
                success: function (data) {
                    window.location.href = "/Home/Details/" + data.id;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Invalid Username or Password / waiting for admin approval')
                    $("#postResult").val(jqXHR.statusText);
                }
            });
        });
</script>
}


谢谢你们。

关于javascript - 将元素列表传递给循环以显示内容时，但id始终返回最后一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60428001/

25 4 0
文章推荐： Javascript Promise 无法解析 createWriteStream
文章推荐： c++ - 为什么我们需要引用折叠规则
文章推荐： python - Selenium xpath 元素属性
文章推荐： c++ - 用户定义数组的函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com