我怎样才能获得id /生成动态生成的元素在html中使用jQuery的ID？

Question

嗨，我有一个学生档案表格，学生可以填写他们的详细信息。 学生可以添加学校，添加高中，并通过点击添加学校动态添加学院，添加高中并添加学院锚标签。

代码这种形式如下

<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？

Answer 1

您使用.clone方法，这就是添加复制的一切...... 可以修改其中正在使用methor的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); 
    }); 
}); 

编辑：要为每个动态ID行（“输入”和“TR”），你可以这样做：

$(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/，看看源代码，如果是这样，你想要什么。