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

Question

我有一个包含一百多条记录的数组，这些记录是我通过 Ajax 响应从数据库返回的，其中包含 ID、名字、姓氏和电子邮件等值。我已将最后三个字段（名字、姓氏和电子邮件）分配给我的 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 值分配给隐藏字段，以便在编辑操作期间为我提供良好的服务？

Answer 1

如果我正确理解了您的问题，那么您可以通过在 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({
        });

});