我怎樣才能獲得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/，看看源代碼，如果是這樣，你想要什麼。