如何在下面的jQuery代码中更改克隆行的ID

如何解决如何在下面的jQuery代码中更改克隆行的ID

我正在尝试实现ID的更改，但是我所拥有的代码仅具有更改元素名称的代码，任何人都可以在下面给出的jquery代码中帮助您更改元素的ID >

预先感谢。 HTML View的源代码如下

<div style="width:700px; padding:5px; background-color:white;">
        <form action="/" method="post">
            <a id="addNew" href="#">+</a> <a id="remove" href="#">-</a>
            <table id="dataTable" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>UserName</th>
                        <th>Password</th>
                        <th>Service line</th>
                        <th>Track</th>
                        <th>subtrack</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[0].UserName" type="text" value="required" /></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[0].Password" type="text" value="required" /></td>
                        <td>
                            <select class="wrapper-dropdown Service_Line" id="z0__Service_Line" name="[0].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="wrapper-dropdown Track" id="z0__Track" name="[0].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="wrapper-dropdown Sub_Track" id="z0__Sub_Track" name="[0].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                </tbody>
            </table>
            <input type="submit" value="Save Bulk Data" />
            <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Iv10IHEfBVKvKHuuUa1dyFaBzngVKjKG3-va_WAZxz30jKahHLoMeCFM1qbmA9nPf01CYch9VobgyZOOv60VPsPJjlD4yUbH4F7TF0QrcJJTnMpj88n1Et9Ksa2i2y23CBEPqICCPoC18cdrY1Ral0" />
        </form>
    </div>

jQuery如下

    $(document).ready(function () {
        //1. Add new row
        $("#addNew").click(function (e) {
            e.preventDefault();
            var $tableBody = $("#dataTable");
            var $trLast = $tableBody.find("tr:last");
            var $trNew = $trLast.clone(true);
            var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
            $.each($trNew.find(':input'),function (i,val) {
                // Replaced Name
                var oldN = $(this).attr('name');
                var newN = oldN.replace('[' + suffix + ']','[' + (parseInt(suffix) + 1) + ']');
                $(this).attr('name',newN);
                // If you have another Type then replace with default value
                $(this).removeClass("input-validation-error");
            });
            $trLast.after($trNew);
        });
    });

我尝试过在更改后将attr（name）更改为attr（id），因为它不会更改名称，甚至也不会更改ID ...

有关更多参考，HTML代码如下：

 <table id="dataTable" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>UserName</th>
                <th>Password</th>
                <th>Service line</th>
                <th>Track</th>
                <th>subtrack</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null && Model.Count > 0)
             {
                int j = 0;
                foreach (var i in Model)
                {
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td>@Html.TextBoxFor(a => a[j].UserName)</td>
                        <td>@Html.TextBoxFor(a => a[j].Password)</td>
                        <td>
                            @if (ViewBag.ServiceLineList != null)
                            {
                                @Html.DropDownListFor(a => a[j].Service_Line,ViewBag.ServiceLineList as SelectList,"--Select--",new {  @class = "wrapper-dropdown Service_Line" })
                            }
                        </td>
                        <td>
                            @Html.DropDownListFor(a => a[j].Track,new SelectList(" "),new {  @class = "wrapper-dropdown Track" })
                        </td>
                        <td>
                            @Html.DropDownListFor(a => a[j].Sub_Track,new { @class = "wrapper-dropdown Sub_Track" })
                        </td>

                        <td>
                            @if (j > 0)
                            {
                                <a href="#" class="remove">Remove</a>
                            }
                        </td>
                    </tr>
                    j++;
                }
             }
        </tbody>
    </table>

解决方法

要创建唯一的ID，我们可以对jQuery中添加的行进行计数，并将其附加到基本名称（例如public void ConfigureServices(IServiceCollection services) { services.AddControllers(); services.AddMemoryCache(); services.AddSingleton(x => new ApplicationCache()); services.AddScoped<IApplicationRepository,ApplicationRepository>(); } ）上，以创建唯一的名称和ID。您说HTML中将只有一行，因此我们可以从1开始对新行进行计数。

每次单击“添加新”按钮时，步骤如下（数字与注释数字匹配）：

1. 初始化变量以开始计数
2. 为该行生成一个唯一的ID，例如TemplateRow-1：UserName
3. 克隆行并传递ID：var newId = "TemplateRow-" + rowcount;
4. 为每个输入生成名称和ID：获取输入名称，删除$trLast.clone(true).prop({ id: newId});以获取基本名称（例如[n]），然后使用它来创建新名称（例如{{ 1}}）和ID（例如UserName）。

有效代码段：：我使用console.log显示新ID，以便您看到要添加的内容：

[1].UserName

z1__UserName