时间戳

首页 > 解决方案 > 如何管理将 ID 分配给多行的隐藏字段？

jquery - 如何管理将 ID 分配给多行的隐藏字段？

问题描述

我有一个包含一百多条记录的数组，这些记录是通过 Ajax 响应从数据库返回的，其中包含 Id、First Name、Last Name 和 Email 等值。我已将最后三个字段（名字、姓氏和电子邮件）分配给我的 Razor 视图中的数据表行，每个行在最后一列中都有操作按钮。为简单起见，我想将 Id 值分配给隐藏字段，以便我可以借助该行的特定 Id 轻松编辑特定行。

虽然我的 Razor 视图上有一个隐藏字段，但我想知道如何将 Id 值分配给每条记录的隐藏字段？我的代码如下所示：

var userTable;
$.ajax({
        url: serviceUrl + "/api/account/getallusers",
        type: "GET",
        crossDomain: true,
        contentType: "application/json",
        dataType: 'json',
        success: function (res) {
            var strHTML = "";

            for (var i = 0; i < res.length; i++) {

                strHTML += '<tr>';
                strHTML += '<td style="width: 20px !important;">';
                strHTML += res[i].FirstName;
                strHTML += '</td>';
                strHTML += '<td style="width: 30px !important;">';
                strHTML += res[i].LastName;
                strHTML += '</td>';
                strHTML += '<td style="width: 50px !important;">';
                strHTML += res[i].Email;
                strHTML += '</td>';
                strHTML += '<td>';

                //Code for action buttons goes here

                strHTML += '</td>';
                strHTML += '</tr>';
            }

            $('#dtusers tbody').html(strHTML);
                userTable = $("#dtusers").DataTable({
            });

    });

是否有任何简单而有效的方法将 Id 值分配给隐藏字段，以便它可以在编辑操作期间很好地为我服务？

标签： jqueryasp.net-mvc-5datatablesasp.net-ajaxhidden-field

解决方案

如果我正确理解了您的问题，那么您可以通过在 for 循环之前添加一个计数器变量来做到这一点。然后，您可以将其添加到表中 TR 元素的 ID 中。

就像是

strHTML += '<TR id=tableRow' + counter + '>';

然后在 for 循环结束时为下一次迭代增加计数器。

它是否隐藏都没有区别，因为任何使用开发人员工具的人仍然可以看到元素中属性的值。

你的代码看起来像这样

var userTable;
 $.ajax({
    url: serviceUrl + "/api/account/getallusers",
    type: "GET",
    crossDomain: true,
    contentType: "application/json",
    dataType: 'json',
    success: function (res) {
        var strHTML = "";
        var counter = 1;
        for (var i = 0; i < res.length; i++) {

            strHTML += '<tr id=tableRow' + counter + '>';
            strHTML += '<td style="width: 20px !important;">';
            strHTML += res[i].FirstName;
            strHTML += '</td>';
            strHTML += '<td style="width: 30px !important;">';
            strHTML += res[i].LastName;
            strHTML += '</td>';
            strHTML += '<td style="width: 50px !important;">';
            strHTML += res[i].Email;
            strHTML += '</td>';
            strHTML += '<td>';

            //Code for action buttons goes here

            strHTML += '</td>';
            strHTML += '</tr>';
            counter++; //increment the counter for next iteration
        }

        $('#dtusers tbody').html(strHTML);
            userTable = $("#dtusers").DataTable({
        });

});

推荐阅读