我已经克隆了一个元素并更改了其ID，但无法在Jquery中获取clone元素的ID。有人可以帮忙吗？
Html View的源代码如下
<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>
<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="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
<td>
<select class="[1].Service_Line" id="z0__Service_Line" name="[1].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="[1].Track" id="z0__Track" name="[1].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
<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="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
<td>
<select class="[1].Service_Line" id="z0__Service_Line" name="[1].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="[1].Track" id="z0__Track" name="[1].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
<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="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
<td>
<select class="[1].Service_Line" id="z0__Service_Line" name="[1].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="[1].Track" id="z0__Track" name="[1].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
<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="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
<td>
<select class="[1].Service_Line" id="z0__Service_Line" name="[1].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="[1].Track" id="z0__Track" name="[1].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
<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="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
<td>
<select class="[1].Service_Line" id="z0__Service_Line" name="[1].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="[1].Track" id="z0__Track" name="[1].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
</tbody>
</table>
在上面的代码中，我使用下面的jQuery代码通过增加行号来克隆行
$(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);
// 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('class', '[' + rowcount + '].' + inputParts[1]);
$(this).removeClass("input-validation-error");
});
$trLast.after($trNew);
$("#[" + rowcount + "].Service_Line").change(function () {
debugger;
$.get("/Users/GetTrackList", { Service_Line_ID: $("#[" + rowcount + "].Service_Line").val() }, function (data) {
$("#[" + rowcount + "].Track").empty();
$.each(data, function (index, row) {
$("#[" + rowcount + "].Track").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
});
});
})
rowcount++;
});
});
但是，在此行$（“＃[” + rowcount +“] .Service_Line”）。change（function（）{我无法从网页上获取克隆行的ID，谁能帮我吗？提前
克隆时行的service_line id继续增加为[1] .service_line，[2] .service_line，[3] .service_line，[4] .service_line，依此类推…………我需要在此功能中使用jQuery获取此ID
$("#[" + rowcount + "].Service_Line").change(function () {
debugger;
$.get("/Users/GetTrackList", { Service_Line_ID: $("#[" + rowcount + "].Service_Line").val() }, function (data) {
$("#[" + rowcount + "].Track").empty();
$.each(data, function (index, row) {
$("#[" + rowcount + "].Track").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
});
});
})
$("select[name='[" + rowcount + "].Service_Line']").change(function () {
//get the row count of this row using the keyword this, to
//get the select which fired the event, then use regex
//to capture the number from the name attribute:
const thisrow = $(this).attr('name').match(/\[(\d+)\]/)[1];
$.get("/Users/GetTrackList", { Service_Line_ID: $("select[name='[" + thisrow + "].Service_Line']").val() }, function (data) {
$("select[name='[" + thisrow + "].Track']").empty();
$.each(data, function (index, row) {
$("select[name='[" + thisrow + "].Track']").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
});
debugger;
});
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句