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

Question

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

提前致谢。 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)，这样它不更改名称但甚至不更改 ids...

更多参考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>

Answer 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）。

工作代码段： 我使用 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>

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

How to change Id of cloned row in below jQuery code

html

javascript

asp.net-mvc

jquery

jquery-ui