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

【问题标题】：How to change Id of cloned row in below jQuery code如何在下面的jQuery代码中更改克隆行的ID
【发布时间】：2020-12-16 07:07:13
【问题描述】：

我正在尝试实现Id的更改但是我拥有的代码只有更改元素名称的代码，任何人都可以帮助更改下面给出jquery代码中的元素的id

提前致谢。 html查看-源码如下

<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(" "), "--Select--", new {  @class = "wrapper-dropdown Track" })
                        </td>
                        <td>
                            @Html.DropDownListFor(a => a[j].Sub_Track, new SelectList(" "), "--Select--", new { @class = "wrapper-dropdown Sub_Track" })
                        </td>

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

【问题讨论】：

添加您的 HTML 代码。
什么ID？您尚未向我们展示您的 HTML 代码，因此我们不知道您需要更改什么 id。请使用所有相关代码编辑您的问题，以便我们提供帮助。
@FluffyKitten 在当前的 Jquery 代码中没有在 html 中给出名称，但是它也通过在开头添加序列号来更改所有克隆行的名称，所以遵循相同的格式我想改为更改 id姓名
@TigranAbrahamyan Html代码也加了请帮忙
@FluffyKitten html代码也加了

标签： javascript html jquery asp.net-mvc jquery-ui

【解决方案1】：

要创建唯一的 id，我们可以记录 jQuery 中添加的行数，并将其附加到基本名称（例如 UserName）以创建唯一的名称和 id。你说 HTML 中只有一行，所以我们可以从 1 开始计算新行。

每次点击“新增”按钮时，步骤为（数字与评论数字一致）：

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

正在工作的 sn-p： 我使用 console.log 显示新 id，以便您可以看到正在添加的内容：

$(document).ready(function() {
  /* 1. Initialise our variable to keep count of the rows added */
  var rowcount = 1;

  //Add new row
  $("#addNew").click(function(e) {
    e.preventDefault();
    var $tableBody = $("#dataTable");
    var $trLast = $tableBody.find("tr:last");

    // 2. Create the new id with the row count
    var newId = "TemplateRow-" + rowcount;

    // 3. clone the row with our new id
    var $trNew = $trLast.clone(true).prop({ id: newId });

    // 4. rename each input and give an id
    $.each($trNew.find(':input'), function(i, val) {

      oldName = $(this).attr('name');
      inputParts = oldName.split(".");

      // set the  name and id with the base name and rowcount
      $(this).attr('name', '[' + rowcount + '].'+inputParts[1]);
      $(this).attr('id', 'z'+rowcount+'__'+inputParts[1]);

      $(this).removeClass("input-validation-error");
    });
    
    $trLast.after($trNew);

    rowcount++;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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 type="text" name="username"></td>
      <td><select name="serviceline"><option>1</option></select></td>
      <td><input type="text" name="track"></td>
      <td><input type="text" name="subtrack"></td> -->
                        <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>
<button id="addNew">Add New</button>

【讨论】：

我不想增加模板行数，而是增加表中元素的 ID，例如用户名、密码、service_Line、Track、Sub_track TO username1 , password1 , service_Line1 , Track1 , Sub_track1 username2 , password2 , service_Line2 , Track2 , Sub_track2 等等......
@Aakib 你能给我们你想要更改的元素的 HTML 吗？您还没有向我们展示输入的 HTML - 只有生成它们的脚本 - 所以我们不知道能够使用它们是什么感觉！
@Aakib 我没有看到 HTML 代码。我看到您的模板脚本生成 HTML 但不是 HTML 本身。我们需要查看输入的实际 HTML。
@Aakib "查看源代码" 或在浏览器的元素检查器中。我只需要看看一行输入的结构。
@FluffyKitten 通过添加或不添加克隆行