如何使用javascript或jquery将元素动态添加到表单中？

我有一个学生档案表，学生填写他们的教育信息

我的代码是

<script language="JavaScript">

var imCount = 0;

function addRow(r, tdCount) {
     alert(tdCount);
     alert(r.innerHTML);
     var root = r.parentNode.parentNode.parentNode; //the root 

     var allRows = root.getElementsByTagName('tr'); //the rows' collection 
     var cRow = root.insertRow(7);
     var cRow = allRows[tdCount + imCount].cloneNode(true)//the clone of the 1strow 

        cRow.setAttribute('name', cRow.getAttribute('name') + '_' + (allRows.length + 1 +  imCount)); //change the selecet's name 

    var cLbl = cRow.getElementsByTagName('label')[0];
    cLbl.setAttribute("style", "visibility: collapse");

    var cInp = cRow.getElementsByTagName('input'); //the inputs' collection of the 1st row 
    for (var i = 0; i < cInp.length; i++) {//changes the inputs' names (indexes the names) 
        cInp[i].setAttribute('name', cInp[0].getAttribute('name') + '_' + (allRows.length + 1 + imCount))
    }
    var cSel = cRow.getElementsByTagName('select')[0];
    cSel.setAttribute('name', cSel.getAttribute('name') + '_' + (allRows.length + 1 + imCount)); //change the selecet's name 
    //root.appendChild(cRow);//appends the cloned row as a new row 
    allRows[tdCount + imCount].parentNode.insertBefore(cRow, allRows[tdCount + imCount].nextSibling)
    imCount++;
    alert(imCount);
}

  </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="#" onClick="javascript: addRow(this,1);">Add Shools</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="#" onClick="javascript: addRow(this,4);">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="#" onClick="javascript: addRow(this,8);">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>

var-imCount=0；
函数addRow（r，tdCount）{
警报（tdCount）；
警报（r.innerHTML）；
var root=r.parentNode.parentNode.parentNode；//根
var allRows=root.getElementsByTagName（'tr'）；//行集合
var cRow=root.insertRow（7）；
var cRow=allRows[tdCount+imCount].cloneNode（true）//1strow的克隆
cRow.setAttribute（'name'，cRow.getAttribute（'name'）+'.'+（allRows.length+1+imCount））；//更改selecet的名称
var cLbl=cRow.getElementsByTagName（'label'）[0]；
setAttribute（“样式”，“可见性：折叠”）；
var cInp=cRow.getElementsByTagName（'input'）；//第一行的inputs'集合
对于（var i=0；i教育详情
学校：
-挑选-
2010
2009
2008
2007
2006
2005
2004
2001
2000



高中：
-挑选-
2010
2009
2008
2007
2006
2005
2004
2001
2000
>





学院：
-挑选-
2010
2009
2008
2007
2006
2005
2004
2001
2000

当用户单击AddSchool链接时，它将调用addRow（）并传递两个参数addRow（r，tdCount）

我通过1向第1行添加新元素，它工作得非常完美

我可以添加多个新元素，但现在看另一个部分

 <a href="#" onClick="javascript: addRow(this,4);">Add High Schools</a>

在这里，我通过了4级考试，为我的表格添加了新的元素，它在不添加学校的情况下工作得非常完美。但当我把学校增加2-3倍时，就不会增加高中了

像这样

在上图中，你可以发现我已经添加了3所新学校，现在我想添加高中，但无法添加到表单中

我如何解决这个问题

---

有没有办法在addRow（这个，4）中找到tr而不是硬编码值？

我会像这样更改代码（删除onclick）

---

在这里摆弄：

您在jquery中检查过append（）、html（）和size（）函数吗？正如Nicola Peluchetti所回答的那样。它工作得很完美，但我知道，通过查看页面的源代码，我并没有获得所有文本框的id。我需要为所有新的文本框生成id。我能做些什么来获得身份证？@Nicola Peluchetti:谢谢你的支持

 <a href="#" onClick="javascript: addRow(this,4);">Add High Schools</a>

$('.studentprofileupdateBody a').click(function(){
   console.log('ok');
    var $tr = $(this).closest('tr').prev()
     var clone = $tr.clone();
    $tr.after(clone);
});