如何在下面的jQuery代码中更改克隆行的ID
Posted
技术标签:
【中文标题】如何在下面的jQuery代码中更改克隆行的ID【英文标题】：How to change Id of cloned row in below jQuery code 【发布时间】：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代码也加了 【参考方案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 通过添加或不添加克隆行以上是关于如何在下面的jQuery代码中更改克隆行的ID的主要内容，如果未能解决你的问题，请参考以下文章