如何使用jquery在html中获取动态生成元素的id / generate id？
您好我有一份学生档案表格，学生可以填写他们的详细信息。 学生可以通过点击添加学校，添加高中并添加大学锚标签来添加学校，添加高中和动态添加大学。
此表格的代码如下
<script type="text/javascript">
$(document).ready(function () {
$('.studentprofileupdateBody a').click(function () {
console.log('ok');
var $tr = $(this).closest('tr').prev()
var clone = $tr.clone();
$tr.after(clone);
});
});
</script>
<form method="post" action="">
<table width="100%">
<tr>
<td>
<div id="Education">
<table class="Studentprofile" id="tblEducation">
<tr>
<td colspan="2"><br/> Education Details</td>
</tr>
<tr id="schoolRow" name="schoolRow">
<td class="studentprofileupdateHead" >
<label for="schools">Schools:</label>
</td>
<td class="studentprofileupdateBody" id="schools">
<input type="text" id="s1" name="s1" title="S1"></input>
<select name="selSYear">
<option value="0">-Select-</option>
<option value="1">2010</option>
<option value="2">2009</option>
<option value="3">2008</option>
<option value="4">2007</option>
<option value="5">2006</option>
<option value="6">2005</option>
<option value="7">2004</option>
<option value="8">2001</option>
<option value="8">2000</option>
<//select>
</td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
<a href="#">Add Schools</a>
</td>
</tr>
<tr>
<td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
</tr>
<tr id="highschoolRow" name="highschoolRow">
<td class="studentprofileupdateHead" >
<label for="highschool">High School:</label>
</td>
<td class="studentprofileupdateBody" id="highschool">
<input type="text" id="hs1" name="hs11" title="HS1" />
<select name="selHSYear">
<option value="0">-Select-</option>
<option value="1">2010</option>
<option value="2">2009</option>
<option value="3">2008</option>
<option value="4">2007</option>
<option value="5">2006</option>
<option value="6">2005</option>
<option value="7">2004</option>
<option value="8">2001</option>
<option value="8">2000</option>
<//select>>
<br><br/>
<hr class="profileSubSection"/>
</td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
<a href="#">Add High Schools</a>
</td>
</tr>
<tr>
<td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
</tr>
<tr id="collegeRow" name="collegeRow">
<td class="studentprofileupdateHead" >
<label for="college">College:</label>
</td>
<td class="studentprofileupdateBody" id="college">
<input type="text" id="co1" name="co1" title="CO1"/>
<select name="selColYear">
<option value="0">-Select-</option>
<option value="1">2010</option>
<option value="2">2009</option>
<option value="3">2008</option>
<option value="4">2007</option>
<option value="5">2006</option>
<option value="6">2005</option>
<option value="7">2004</option>
<option value="8">2001</option>
<option value="8">2000</option>
<//select>
<br><br/>
<hr class="profileSubSection"/>
</td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
<a href="#">Add College</a>
</td>
</tr>
<tr>
<td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
<input type="submit" id="saveStudentEducationInfo" name="saveStudentEducationInfo" title="Save Education Info" value="Save Details" />
<input type="submit" id="cancelStudentEducationInfo" name="cancelStudentEducationInfo" title="Cancel Education Info" value="Cancel" />
</td>
</tr>
<tr>
<td colspan="2"><br/><br/></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
它完美无缺，并且动态添加任何元素，但当我看到此页面的页面源时，我知道它没有生成新元素id。
看起来像这样..
生成新元素，但通过查看此页面的源代码，
<form method="post" action="">
<table width="100%">
<tr>
<td>
<div id="Education">
<table class="Studentprofile" id="tblEducation">
<tr>
<td colspan="2"><br/> Education Details</td>
</tr>
<tr id="schoolRow" name="schoolRow">
<td class="studentprofileupdateHead" >
<label for="schools">Schools:</label>
</td>
<td class="studentprofileupdateBody" id="schools">
<input type="text" id="s1" name="s1" title="S1"></input>
<select name="selSYear">
<option value="0">-Select-</option>
<option value="1">2010</option>
<option value="2">2009</option>
<option value="3">2008</option>
<option value="4">2007</option>
<option value="5">2006</option>
<option value="6">2005</option>
<option value="7">2004</option>
<option value="8">2001</option>
<option value="8">2000</option>
<//select>
</td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
<a href="#">Add Schools</a>
</td>
</tr>
<tr>
<td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
</tr>
<tr id="highschoolRow" name="highschoolRow">
<td class="studentprofileupdateHead" >
<label for="highschool">High School:</label>
</td>
<td class="studentprofileupdateBody" id="highschool">
<input type="text" id="hs1" name="hs11" title="HS1" />
<select name="selHSYear">
<option value="0">-Select-</option>
<option value="1">2010</option>
<option value="2">2009</option>
<option value="3">2008</option>
<option value="4">2007</option>
<option value="5">2006</option>
<option value="6">2005</option>
<option value="7">2004</option>
<option value="8">2001</option>
<option value="8">2000</option>
<//select>>
<br><br/>
<hr class="profileSubSection"/>
</td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
<a href="#">Add High Schools</a>
</td>
</tr>
<tr>
<td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
</tr>
<tr id="collegeRow" name="collegeRow">
<td class="studentprofileupdateHead" >
<label for="college">College:</label>
</td>
<td class="studentprofileupdateBody" id="college">
<input type="text" id="co1" name="co1" title="CO1"/>
<select name="selColYear">
<option value="0">-Select-</option>
<option value="1">2010</option>
<option value="2">2009</option>
<option value="3">2008</option>
<option value="4">2007</option>
<option value="5">2006</option>
<option value="6">2005</option>
<option value="7">2004</option>
<option value="8">2001</option>
<option value="8">2000</option>
<//select>
<br><br/>
<hr class="profileSubSection"/>
</td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
<a href="#">Add College</a>
</td>
</tr>
<tr>
<td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
<input type="submit" id="saveStudentEducationInfo" name="saveStudentEducationInfo" title="Save Education Info" value="Save Details" />
<input type="submit" id="cancelStudentEducationInfo" name="cancelStudentEducationInfo" title="Cancel Education Info" value="Cancel" />
</td>
</tr>
<tr>
<td colspan="2"><br/><br/></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
我希望我的代码为每个元素生成新的id，以便通过其id清楚地标识每个元素。
我如何获得每个元素的id？
1 个答案:
答案 0 :(得分：1)
你正在使用.clone方法，添加那些复制一切...... 您可以修改使用该方法的ID，如下所示：
$(document).ready(function () {
$('.studentprofileupdateBody a').click(function () {
console.log('ok');
var $tr = $(this).closest('tr').prev();
var clone = $tr.clone().attr("id","new-id");
$tr.after(clone);
});
});
编辑：要为每一行（'input'和'tr'）设置动态ID，您可以执行以下操作：
$(document).ready(function () {
var dynamicId, inputName, numberEachType;
$('.studentprofileupdateBody a').click(function () {
console.log('ok');
var $tr = $(this).closest('tr').prev();
numberEachType = $('table#tblEducation tr[name="'+$tr.attr('name')+'"]').length;
dynamicId = $tr.attr('name') + numberEachType;
var clone = $tr.clone().attr('id',dynamicId); //dynamic ID at <tr>
inputName = clone.find('input').attr('name');
dynamicId = inputName.substring(0,inputName.length-1) + (numberEachType+1);
clone.find('input').attr('id',dynamicId).attr('name',dynamicId).attr('title',dynamicId.toUpperCase()); //dynamic ID, Name and title at <input>
$tr.after(clone);
});
});
在此处http://jsfiddle.net/expertCode/NT4Zr/尝试示例并查看源代码，如果这是您想要的。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？