how can i get id/ generate id of dynamically generated elements in html using jquery?
Hi i have a student profile form where student can fill their details. Student can add school, add high school and add college dynamically by clicking add school, add high school and add college anchor tag.
Code for this form is as below
<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>
<//开发者_JS百科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>
It works perfect and add any no of elements dynamically but when i see the page source of this page i get to know that its not generating new elements id.
It looks like this..
Generated New elements but by viewing source code of this page it gives,
<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>
I want my code to generate new id for each element to distinctly identify each element by its id.
How can i get id for each element?
You are using .clone method, add thats copy everything... You can modify the id where are using that methor, something like this:
$(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);
});
});
EDIT: To have dynamic id for each row('input' and 'tr'), you can do this:
$(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);
});
});
Try an example here http://jsfiddle.net/expertCode/NT4Zr/ and see the source code, if it's this what you want.
加载中,请稍侯......
精彩评论