Question

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

Student Profile

我的代码是

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

当用户点击Add School链接时，它将调用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次时，它就不会增加高中。

喜欢这个 Student Profile 2

在上面的图片中你可以发现我已经添加了3所新学校，现在我想加入高中但是它不能添加到表格中。

我该如何解决这个问题？

如何在addRow（this，4）中找到tr而不是硬编码值？

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/

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

1 个答案: