Javascript 如何获取克隆元素的id
我已经克隆了一个元素并更改了它们的id,但无法在Jquery中获取克隆元素的id。有人能帮忙吗 Html视图源代码如下Javascript 如何获取克隆元素的id,javascript,jquery,ajax,asp.net-mvc,entity-framework,Javascript,Jquery,Ajax,Asp.net Mvc,Entity Framework,我已经克隆了一个元素并更改了它们的id,但无法在Jquery中获取克隆元素的id。有人能帮忙吗 Html视图源代码如下 <table id="dataTable" border="0" cellpadding="0" cellspacing="0"> <thead> <tr>
<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>
用户名
密码
服务线
跟踪
子轨
--挑选--
A.
B
C
--挑选--
--挑选--
--挑选--
A.
B
C
--挑选--
--挑选--
--挑选--
A.
B
C
--挑选--
--挑选--
--挑选--
A.
B
C
--挑选--
--挑选--
--挑选--
A.
B
C
--挑选--
--挑选--
--挑选--
A.
B
C
--挑选--
--挑选--
在上面的代码中,我通过增加行的id克隆了行
使用下面的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++;
});
});
$(文档).ready(函数(){
/*1.初始化变量以保持添加的行数*/
var rowcount=1;
//添加新行
$(“#添加新”)。单击(函数(e){
e、 预防默认值();
var$tableBody=$(“#数据表”);
var$trLast=$tableBody.find(“tr:last”);
//2.使用行计数创建新id
//var newId=“TemplateRow-”+行数;
//3.使用新id克隆行
var$trNew=$trLast.clone(true);
//4.重命名每个输入并给出一个id
$.each($trNew.find(':input'),函数(i,val){
oldName=$(this.attr('name');
inputParts=oldName.split(“.”);
//使用基本名称和行数设置名称和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>")
});
});
})
// set the name and id with the base name and rowcount
$(this).attr('name', '[' + rowcount + '].' + inputParts[1]);
$(this).attr('class', '[' + rowcount + '].' + inputParts[1]);
$("select[name='[" + rowcount + "].Service_Line']").change(function() {); //etc.
$("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;
});
})