我有一份学生概况表,其中学生填写了教育信息。
My code is
<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学校的链接时,它将打电话,并通过两个参数添加Row(r, tdCount)。
<a href="#" onClick="javascript: addRow(this,1);">Add Schools</a>
i 接过1号,在第1行中增加新的内容。
i 可以增加多个新内容,但现在可考虑另一节,
<a href="#" onClick="javascript: addRow(this,4);">Add High Schools</a>
这里,我顺便说四,在我的表格中添加新的内容,否则就完美无缺。 但如果增加两到三倍的学校,就不会增加中学。
Like this
在上述形象中,你可以发现,我增加了3所新学校,现在我想要增加中学,但可以补充。
如何解决这一问题?
在“彩虹”中找到tr而不是硬编码价值的任何方法?