javascript - 我如何使用 javascript 或 jquery 向我的表单动态添加元素？

Question

我有一个学生资料表，学生可以在其中填写有关他们教育的信息。

我的代码是

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

当用户点击“添加学校”链接时，它将调用 addRow() 并传递两个参数 addRow(r, tdCount)。

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

我正在传递 1 以将新元素添加到第 1 行，它工作完美

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

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

这里我传递 4 以向我的表单添加新元素，它在不添加 ADD SCHOOLS 的情况下工作完美。但是当我添加 2-3 次学校时，它不会添加高中。

像这样

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

我该如何解决这个问题？

有什么方法可以找到 tr 而不是在 addRow(this,4) 中硬编码值？

Answer 1

我会像这样更改您的代码(删除 onclick )

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

在这里摆弄:http://jsfiddle.net/mSRg3/